Merge pull request #1951 from carbon-design-system/fix-hotspot-1897

fix(hotspoteditormodal): make the user hold CTRL key before adding hotspots

Author: kodiakhq[bot]

packages/react/src/components/HotspotEditorModal/HotspotEditorTooltipTab/HotspotEditorTooltipTab.jsx

@@ -83,7 +83,7 @@ const defaultProps = {
     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.',
+      '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.',
     colorDropdownLabelText: 'Select a color',
     colorDropdownTitleText: 'Color',
   },

packages/react/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>

packages/react/src/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.jsx

@@ -82,7 +82,7 @@ const defaultProps = {
   i18n: {
     boldLabelText: 'Text Bold',
     infoMessageText:
-      'Select an existing label on the image to edit it or click on an empty region to create one',
+      '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',
     fontColorLabelText: 'Font color',

packages/react/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>

packages/react/src/components/ImageCard/ImageHotspots.jsx

@@ -411,6 +411,8 @@ const ImageHotspots = ({
   selectedHotspots,
   displayOption,
 }) => {
+  // Need to keep track of whether the Ctrl key is currently pressed because we want to only add hotspots in that case
+  const [isCtrlPressed, setIsCtrlPressed] = useState();
   // Image needs to be stored in state because we're dragging it around when zoomed in, and we need to keep track of when it loads
   const [image, setImage] = useState({});
   // Minimap needs to be stored in state because we're dragging it around when zoomed in
@@ -430,6 +432,28 @@ const ImageHotspots = ({
 
   const mergedI18n = useMemo(() => ({ ...defaultProps.i18n, ...i18n }), [i18n]);
 
+  const handleCtrlKeyUp = useCallback((event) => {
+    // Was the control key unpressed
+    if (event.keyCode === 17) {
+      setIsCtrlPressed(false);
+    }
+  }, []);
+  const handleCtrlKeyDown = useCallback((event) => {
+    if (event.ctrlKey) {
+      setIsCtrlPressed(true);
+    }
+  }, []);
+
+  // Listen to the control key to add hotspots
+  useEffect(() => {
+    window.addEventListener('keydown', handleCtrlKeyDown);
+    window.addEventListener('keyup', handleCtrlKeyUp);
+    return () => {
+      window.removeEventListener('keydown', handleCtrlKeyDown);
+      window.removeEventListener('keyup', handleCtrlKeyUp);
+    };
+  }, [handleCtrlKeyDown, handleCtrlKeyUp]);
+
   useEffect(() => {
     setOptions({
       hideZoomControls: hideZoomControlsProp,
@@ -472,7 +496,7 @@ const ImageHotspots = ({
   };
 
   const imageStyle = {
-    cursor: isEditable && !dragging ? 'crosshair' : 'auto',
+    cursor: isEditable && !dragging && isCtrlPressed ? 'crosshair' : 'auto',
     position: 'relative',
     left: image.offsetX,
     top: image.offsetY,
@@ -587,6 +611,14 @@ const ImageHotspots = ({
   /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
   return (
     <div
+      onContextMenu={
+        isEditable
+          ? (event) => {
+              // if we're in edit mode, prevent the CTRL-click context menu from popping
+              event.preventDefault();
+            }
+          : undefined
+      }
       style={containerStyle}
       onMouseOut={() => {
         if (dragging) {
@@ -638,7 +670,7 @@ const ImageHotspots = ({
                 cursor,
                 setCursor,
                 isEditable,
-                callback: onAddHotspotPosition,
+                callback: event.ctrlKey ? onAddHotspotPosition : undefined,
               });
             }
           }}

packages/react/src/components/ImageCard/ImageHotspots.test.jsx

@@ -307,8 +307,9 @@ describe('ImageHotspots', () => {
           selectedHotspots={[]}
         />
       );
-
-      userEvent.click(screen.getByAltText(testImageText));
+      userEvent.click(screen.getByAltText(testImageText), {
+        ctrlKey: true,
+      });
       expect(onAddHotspotPosition).not.toHaveBeenCalled();
 
       rerender(
@@ -325,7 +326,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.

packages/react/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,

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

@@ -18456,7 +18456,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",
       },
@@ -18708,7 +18708,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",
       },