rename annotation_tool into interactive_image

main.py

@@ -130,17 +130,17 @@ with example(overlay):
             </svg>'''
         ui.svg(svg_content).style('background:transparent')
 
-with example(ui.annotation_tool):
+with example(ui.interactive_image):
     from nicegui.events import MouseEventArguments
 
     def mouse_handler(e: MouseEventArguments):
         color = 'green' if e.type == 'mousedown' else 'orange'
-        at.svg_content += f'<circle cx="{e.image_x}" cy="{e.image_y}" r="10" fill="{color}"/>'
+        ii.svg_content += f'<circle cx="{e.image_x}" cy="{e.image_y}" r="10" fill="{color}"/>'
         ui.notify(f'{e.type} at ({e.image_x:.1f}, {e.image_y:.1f})')
 
-    at = ui.annotation_tool('http://placeimg.com/640/360/arch',
-                            on_mouse=mouse_handler,
-                            events=['mousedown', 'mouseup'], cross=True)
+    ii = ui.interactive_image('http://placeimg.com/640/360/arch',
+                              on_mouse=mouse_handler,
+                              events=['mousedown', 'mouseup'], cross=True)
 
 with example(ui.markdown):
     ui.markdown('### Headline\nWith hyperlink to [GitHub](https://github.com/zauberzeug/nicegui).')

nicegui/elements/annotation_tool.js → nicegui/elements/interactive_image.js

@@ -1,4 +1,4 @@
-Vue.component("annotation_tool", {
+Vue.component("interactive_image", {
   template: `
     <div :id="jp_props.id" style="position:relative;display:inline-block" :style="jp_props.style" :class="jp_props.classes">
       <img style="max-width:100%">

nicegui/elements/annotation_tool.py → nicegui/elements/interactive_image.py

@@ -8,17 +8,17 @@ from .element import Element
 
 CustomView.use(__file__)
 
-class AnnotationToolView(CustomView):
+class InteractiveImageView(CustomView):
 
     def __init__(self, source: str, on_mouse: Callable, events: list[str], cross: bool):
-        super().__init__('annotation_tool', source=source, events=events, cross=cross, svg_content='')
+        super().__init__('interactive_image', source=source, events=events, cross=cross, svg_content='')
         self.allowed_events = ['onMouse']
         self.initialize(onMouse=on_mouse)
 
-class AnnotationTool(Element):
+class InteractiveImage(Element):
 
     def __init__(self, source: str, *, on_mouse: Optional[Callable] = None, events: list[str] = ['click'], cross: bool = False):
-        """Annotation Tool
+        """Interactive Image
 
         Create an image with an SVG overlay that handles mouse events and yields image coordinates.
 
@@ -28,7 +28,7 @@ class AnnotationTool(Element):
         :param cross: whether to show crosshairs (default: `False`)
         """
         self.mouse_handler = on_mouse
-        super().__init__(AnnotationToolView(source, self.handle_mouse, events, cross))
+        super().__init__(InteractiveImageView(source, self.handle_mouse, events, cross))
 
     def handle_mouse(self, msg: Dict[str, Any]):
         if self.mouse_handler is None:

nicegui/ui.py

@@ -2,7 +2,6 @@ class Ui:
     from .config import config  # NOTE: before run
     from .run import run  # NOTE: before justpy
 
-    from .elements.annotation_tool import AnnotationTool as annotation_tool
     from .elements.button import Button as button
     from .elements.chart import Chart as chart
     from .elements.checkbox import Checkbox as checkbox
@@ -12,6 +11,7 @@ class Ui:
     from .elements.icon import Icon as icon
     from .elements.image import Image as image
     from .elements.input import Input as input
+    from .elements.interactive_image import InteractiveImage as interactive_image
     from .elements.joystick import Joystick as joystick
     from .elements.html import Html as html
     from .elements.label import Label as label