Binding viewerjs functions with some keys.

app/image-viewer/buffer.py

@@ -22,6 +22,7 @@
 from PyQt5.QtCore import QUrl
 from PyQt5.QtGui import QColor
 from core.browser import BrowserBuffer
+from core.utils import interactive
 from pathlib import Path
 import os
 
@@ -73,3 +74,36 @@ def load_prev_image(self):
             self.image_name = images[image_index]
             self.load_image(os.path.join(self.parent_dir, self.image_name))
             self.change_title(self.image_name)
+
+    @interactive
+    def rotate_left(self):
+        self.buffer_widget.eval_js("rotate_left();")
+
+    @interactive
+    def rotate_right(self):
+        self.buffer_widget.eval_js("rotate_right();")
+
+    @interactive
+    def zoom_out(self):
+        self.buffer_widget.eval_js("zoom_out();")
+
+    @interactive
+    def zoom_in(self):
+        self.buffer_widget.eval_js("zoom_in();")
+
+    @interactive
+    def zoom_reset(self):
+        self.buffer_widget.eval_js("zoom_reset();")
+
+    @interactive
+    def zoom_toggle(self):
+        self.buffer_widget.eval_js("zoom_toggle();")
+
+    @interactive
+    def flip_horizontal(self):
+        self.buffer_widget.eval_js("flip_horizontal();")
+
+    @interactive
+    def flip_vertical(self):
+        self.buffer_widget.eval_js("flip_vertical();")
+

app/image-viewer/index.html

@@ -31,7 +31,7 @@
             <img id="image" src="%2">
         </div>
 
-        <script type="module">
+        <script type="text/javascript">
          // View an image
          const viewer = new Viewer(document.getElementById('image'), {
              inline: true,
@@ -51,6 +51,38 @@
                  viewer.full();
              },
          });
+
+         function rotate_left() {
+             viewer.rotate(-90);
+         }
+
+         function rotate_right() {
+             viewer.rotate(90);
+         }
+
+         function zoom_out() {
+             viewer.zoom(-0.1, true);
+         }
+
+         function zoom_in() {
+             viewer.zoom(0.1, true);
+         }
+
+         function zoom_reset() {
+             viewer.reset();
+         }
+
+         function zoom_toggle() {
+             viewer.toggle();
+         }
+
+         function flip_horizontal() {
+             viewer.scaleX(-viewer.imageData.scaleX || -1);
+         }
+
+         function flip_vertical() {
+             viewer.scaleY(-viewer.imageData.scaleY || -1);
+         }
         </script>
     </body>
 </html>

eaf.el

@@ -529,15 +529,12 @@ Try not to modify this alist directly.  Use `eaf-setq' to modify instead."
     ("-" . "zoom_out")
     ("=" . "zoom_in")
     ("0" . "zoom_reset")
+    ("9" . "zoom_toggle")
     ("x" . "close_buffer")
-    ("j" . "scroll_up")
-    ("k" . "scroll_down")
-    ("h" . "scroll_left")
-    ("l" . "scroll_right")
-    ("," . "scroll_up_page")
-    ("." . "scroll_down_page")
-    ("<" . "scroll_to_begin")
-    (">" . "scroll_to_bottom")
+    ("u" . "rotate_left")
+    ("i" . "rotate_right")
+    ("y" . "flip_horizontal")
+    ("o" . "flip_vertical")
     ("<f12>" . "open_devtools")
     )
   "The keybinding of EAF Image Viewer."