support more mouse events

main.py

@@ -133,7 +133,7 @@ with example(overlay):
 
 with example(ui.annotation_tool):
     ui.annotation_tool('http://placeimg.com/640/360/geometry',
-                       on_click=lambda e: ui.notify(f'{e.image_x:.1f}, {e.image_y:.1f}'))
+                       on_mouse=lambda e: ui.notify(f'{e.image_x:.1f}, {e.image_y:.1f}'))
 
 with example(ui.markdown):
     ui.markdown('### Headline\nWith hyperlink to [GitHub](https://github.com/zauberzeug/nicegui).')

nicegui/elements/annotation_tool.js

@@ -1,20 +1,22 @@
 Vue.component("annotation_tool", {
   template: `<img v-bind:id="jp_props.id" :src="jp_props.options.source"></div>`,
   mounted() {
-    console.log(this.$props.jp_props);
     const image = document.getElementById(this.$props.jp_props.id);
-    image.addEventListener("click", (e) => {
-      const event = {
-        event_type: "onClick",
-        vue_type: this.$props.jp_props.vue_type,
-        id: this.$props.jp_props.id,
-        page_id: page_id,
-        websocket_id: websocket_id,
-        image_x: (e.offsetX * e.target.naturalWidth) / e.target.clientWidth,
-        image_y: (e.offsetY * e.target.naturalHeight) / e.target.clientHeight,
-      };
-      send_to_server(event, "event");
-    });
+    for (const type of this.$props.jp_props.options.events) {
+      image.addEventListener(type, (e) => {
+        const event = {
+          event_type: "onMouse",
+          mouse_event_type: type,
+          vue_type: this.$props.jp_props.vue_type,
+          id: this.$props.jp_props.id,
+          page_id: page_id,
+          websocket_id: websocket_id,
+          image_x: (e.offsetX * e.target.naturalWidth) / e.target.clientWidth,
+          image_y: (e.offsetY * e.target.naturalHeight) / e.target.clientHeight,
+        };
+        send_to_server(event, "event");
+      });
+    }
   },
   props: {
     jp_props: Object,

nicegui/elements/annotation_tool.py

@@ -1,7 +1,7 @@
 from __future__ import annotations
 from typing import Callable
 import traceback
-from ..events import ImageClickEventArguments, handle_event
+from ..events import MouseEventArguments, handle_event
 from .custom_view import CustomView
 from .element import Element
 
@@ -9,32 +9,34 @@ CustomView.use(__file__)
 
 class AnnotationToolView(CustomView):
 
-    def __init__(self, source: str, on_click: Callable):
-        super().__init__('annotation_tool', source=source)
-        self.allowed_events = ['onClick']
-        self.initialize(onClick=on_click)
+    def __init__(self, source: str, on_mouse: Callable, events: list[str]):
+        super().__init__('annotation_tool', source=source, events=events)
+        self.allowed_events = ['onMouse']
+        self.initialize(onMouse=on_mouse)
 
 class AnnotationTool(Element):
 
-    def __init__(self, source: str, on_click: Callable):
+    def __init__(self, source: str, on_mouse: Callable, events: list[str] = ['click']):
         """Annotation Tool
 
         Create a special image that handles mouse clicks and yields image coordinates.
 
         :param source: the source of the image; can be an url or a base64 string
-        :param on_click: callback for when the user clicks on the image (yields `image_x` and `image_y`)
+        :param on_mouse: callback for mouse events (yields `type`, `image_x` and `image_y`)
+        :param events: list of JavaScript events to subscribe to
         """
-        self.click_handler = on_click
-        super().__init__(AnnotationToolView(source, self.handle_click))
+        self.mouse_handler = on_mouse
+        super().__init__(AnnotationToolView(source, self.handle_mouse, events))
 
-    def handle_click(self, msg):
+    def handle_mouse(self, msg):
         try:
-            arguments = ImageClickEventArguments(
+            arguments = MouseEventArguments(
                 sender=self,
                 socket=msg.get('websocket'),
+                type=msg.get('mouse_event_type'),
                 image_x=msg.get('image_x'),
                 image_y=msg.get('image_y'),
             )
-            handle_event(self.click_handler, arguments)
+            handle_event(self.mouse_handler, arguments)
         except:
             traceback.print_exc()

nicegui/events.py

@@ -18,7 +18,8 @@ class EventArguments(BaseModel):
 class ClickEventArguments(EventArguments):
     pass
 
-class ImageClickEventArguments(ClickEventArguments):
+class MouseEventArguments(EventArguments):
+    type: str
     image_x: float
     image_y: float