Feat: added a new event handler named on image hover

CHANGELOG.md

@@ -1,5 +1,13 @@
 Changelog
 
+# v3.1.0 [2024-12-05]
+
+## Minor Release
+
+### Features 
+- Adds a new event handler named `onImageHover` which is applicable in User mode
+---
+
 # v3.0.1 [2024-12-05]
 
 ## Patch Release

src/components/workspace/elements/image.tsx

@@ -10,8 +10,16 @@ export interface IImageProps extends IImage {
 }
 
 const Image: React.FC<IImageProps> = forwardRef(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ({ x, y, id, href, width, height, rotation, consumer, isSelected, element: _, ...props }, ref: any) => {
+
+  ({ x, y, id, href, width, height, rotation, consumer, isSelected, element, ...props }, ref: any) => {
+    const onMouseOver = (e: React.MouseEvent<SVGElement>) => {
+      if (consumer.mode === "user") {
+        consumer.events?.onImageHover?.(element, {
+          x: e.clientX,
+          y: e.clientY
+        });
+      }
+    };
     return (
       <image
         ref={ref}
@@ -34,6 +42,7 @@ const Image: React.FC<IImageProps> = forwardRef(
           transformOrigin: `center`,
           ...consumer.styles?.elements?.image?.base?.properties
         }}
+        onMouseOver={onMouseOver}
       />
     );
   }

src/types/index.ts

@@ -36,6 +36,8 @@ export interface IEvents {
   onSeatSelectionChange?: (seats: IPopulatedSeat[]) => void;
   /** Only applicable in user mode. Fired when the user tries to select more seats than the maxSeatSelectionCount */
   onMaxSeatSelectionCountReached?: () => void;
+  /** Only applicable in user mode */
+  onImageHover?: (seat: IImage, coords: ICoordinates) => void;
   onWorkspaceHover?: () => void;
   onWorkspaceLoad?: () => void;
   onSectionClick?: (section: ISection) => void;