add special image element with a click handler that provides image coordinates

nicegui/elements/clicky_image.js

@@ -0,0 +1,22 @@
+Vue.component("clicky_image", {
+  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");
+    });
+  },
+  props: {
+    jp_props: Object,
+  },
+});

nicegui/elements/clicky_image.py

@@ -0,0 +1,40 @@
+from __future__ import annotations
+from typing import Callable
+import traceback
+from ..events import ImageClickEventArguments, handle_event
+from .custom_view import CustomView
+from .element import Element
+
+CustomView.use(__file__)
+
+class ClickyImageView(CustomView):
+
+    def __init__(self, source: str, on_click: Callable):
+        super().__init__('clicky_image', source=source)
+        self.allowed_events = ['onClick']
+        self.initialize(onClick=on_click)
+
+class ClickyImage(Element):
+
+    def __init__(self, source: str, on_click: Callable):
+        """Clicky Image
+
+        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`)
+        """
+        self.click_handler = on_click
+        super().__init__(ClickyImageView(source, self.handle_click))
+
+    def handle_click(self, msg):
+        try:
+            arguments = ImageClickEventArguments(
+                sender=self,
+                socket=msg.get('websocket'),
+                image_x=msg.get('image_x'),
+                image_y=msg.get('image_y'),
+            )
+            handle_event(self.click_handler, arguments)
+        except:
+            traceback.print_exc()

nicegui/events.py

@@ -18,6 +18,10 @@ class EventArguments(BaseModel):
 class ClickEventArguments(EventArguments):
     pass
 
+class ImageClickEventArguments(ClickEventArguments):
+    image_x: float
+    image_y: float
+
 class UploadEventArguments(EventArguments):
     files: List[bytes]
 

nicegui/ui.py

@@ -4,6 +4,7 @@ class Ui:
 
     from .elements.button import Button as button
     from .elements.checkbox import Checkbox as checkbox
+    from .elements.clicky_image import ClickyImage as clicky_image
     from .elements.colors import Colors as colors
     from .elements.custom_example import CustomExample as custom_example
     from .elements.dialog import Dialog as dialog