fix(imagehotspots): support testcases by watching mouseevent for ctrl

Author: scottdickerson

src/components/HotspotEditorModal/HotspotEditorTooltipTab/__snapshots__/HotspotEditorTooltipTab.story.storyshot

@@ -326,7 +326,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
             />
           </svg>
           <p>
-            Click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.
+            Hold the CTRL key and click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.
           </p>
         </div>
       </div>

src/components/HotspotEditorModal/__snapshots__/HotspotEditorModal.story.storyshot

@@ -400,7 +400,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                     />
                   </svg>
                   <p>
-                    Click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.
+                    Hold the CTRL key and click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.
                   </p>
                 </div>
               </div>
@@ -872,7 +872,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                     />
                   </svg>
                   <p>
-                    Click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.
+                    Hold the CTRL key and click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.
                   </p>
                 </div>
               </div>
@@ -1808,7 +1808,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                     />
                   </svg>
                   <p>
-                    Click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.
+                    Hold the CTRL key and click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.
                   </p>
                 </div>
               </div>
@@ -2280,7 +2280,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                     />
                   </svg>
                   <p>
-                    Click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.
+                    Hold the CTRL key and click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.
                   </p>
                 </div>
               </div>

src/components/ImageCard/ImageHotspots.jsx

@@ -746,7 +746,7 @@ const ImageHotspots = ({
                 cursor,
                 setCursor,
                 isEditable,
-                callback: isCtrlPressed ? onAddHotspotPosition : undefined,
+                callback: event.ctrlKey ? onAddHotspotPosition : undefined,
               });
             }
           }}

src/components/ImageCard/ImageHotspots.test.jsx

@@ -343,8 +343,9 @@ describe('ImageHotspots', () => {
           selectedHotspots={[]}
         />
       );
-
-      userEvent.click(screen.getByAltText(testImageText));
+      userEvent.click(screen.getByAltText(testImageText), {
+        ctrlKey: true,
+      });
       expect(onAddHotspotPosition).not.toHaveBeenCalled();
 
       rerender(
@@ -361,7 +362,9 @@ describe('ImageHotspots', () => {
         />
       );
 
-      userEvent.click(screen.getByAltText(testImageText));
+      userEvent.click(screen.getByAltText(testImageText), {
+        ctrlKey: true,
+      });
       // We aren't more specific about the callback param here due to
       // difficulties setting the event.pageX & event.pageY in the test,
       // which are needed for getting the position of the click correct.

src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot

@@ -22,6 +22,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image
     >
       <div
         onBlur={[Function]}
+        onContextMenu={[Function]}
         onMouseOut={[Function]}
         style={
           Object {
@@ -45,7 +46,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image
           src="landscape.jpg"
           style={
             Object {
-              "cursor": "crosshair",
+              "cursor": "auto",
               "height": "auto",
               "left": undefined,
               "objectFit": null,

src/utils/__tests__/__snapshots__/publicAPI.test.js.snap

@@ -18379,7 +18379,7 @@ Map {
         "descriptionTextareaPlaceholderText": "Enter description for the tooltip",
         "iconDropdownLabelText": "Select an icon",
         "iconDropdownTitleText": "Icon",
-        "infoMessageText": "Click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.",
+        "infoMessageText": "Hold the CTRL key and click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.",
         "titleInputLabelText": "Title",
         "titleInputPlaceholderText": "Enter title for the tooltip",
       },
@@ -18631,7 +18631,7 @@ Map {
         "fontColorLabelText": "Font color",
         "fontSizeInvalidText": "Font Size is invalid",
         "fontSizeLabelText": "Font Size",
-        "infoMessageText": "Select an existing label on the image to edit it or click on an empty region to create one",
+        "infoMessageText": "Select an existing label on the image to edit it or hold the CTRL key and click on an empty region to create one",
         "italicLabelText": "Text Italic",
         "underlineLabelText": "Text Underline",
       },