support colored crosshairs for ui.interactive_image (#2727)

nicegui/elements/interactive_image.js

@@ -12,8 +12,8 @@ export default {
       />
       <svg style="position:absolute;top:0;left:0;pointer-events:none" :viewBox="viewBox">
         <g v-if="cross" :style="{ display: showCross ? 'block' : 'none' }">
-          <line :x1="x" y1="0" :x2="x" y2="100%" stroke="black" />
-          <line x1="0" :y1="y" x2="100%" :y2="y" stroke="black" />
+          <line :x1="x" y1="0" :x2="x" y2="100%" :stroke="cross === true ? 'black' : cross" />
+          <line x1="0" :y1="y" x2="100%" :y2="y" :stroke="cross === true ? 'black' : cross" />
         </g>
         <g v-html="content"></g>
       </svg>

nicegui/elements/interactive_image.py

@@ -27,7 +27,7 @@ class InteractiveImage(SourceElement, ContentElement, component='interactive_ima
                  size: Optional[Tuple[float, float]] = None,
                  on_mouse: Optional[Callable[..., Any]] = None,
                  events: List[str] = ['click'],
-                 cross: bool = False,
+                 cross: Union[bool, str] = False,
                  ) -> None:
         """Interactive Image
 
@@ -52,7 +52,7 @@ class InteractiveImage(SourceElement, ContentElement, component='interactive_ima
         :param size: size of the image (width, height) in pixels; only used if `source` is not set
         :param on_mouse: callback for mouse events (contains image coordinates `image_x` and `image_y` in pixels)
         :param events: list of JavaScript events to subscribe to (default: `['click']`)
-        :param cross: whether to show crosshairs (default: `False`)
+        :param cross: whether to show crosshairs or a color string (default: `False`)
         """
         super().__init__(source=source, content=content)
         self._props['events'] = events

website/documentation/content/interactive_image_documentation.py

@@ -62,4 +62,12 @@ def loaded_event():
     ui.button('Change Source', on_click=lambda: ii.set_source(f'https://picsum.photos/640/360?time={time.time()}'))
 
 
+@doc.demo('Crosshairs', '''
+    You can show crosshairs by passing `cross=True`.
+    You can also change the color of the crosshairs by passing a color string.
+''')
+def crosshairs():
+    ui.interactive_image('https://picsum.photos/id/565/640/360', cross='red')
+
+
 doc.reference(ui.interactive_image)