carbon-addons-iot-react 5.8.1 → 5.8.2

package/es/components/HotspotEditorModal/HotspotEditorModal.js

@@ -315,6 +315,7 @@ var HotspotEditorModal = function HotspotEditorModal(_ref) {
     switchCurrentType = _useHotspotEditorStat.switchCurrentType,
     updateHotspotDataSource = _useHotspotEditorStat.updateHotspotDataSource,
     updateHotspotTooltip = _useHotspotEditorStat.updateHotspotTooltip,
+    updateHotspotPosition = _useHotspotEditorStat.updateHotspotPosition,
     updateTextHotspotStyle = _useHotspotEditorStat.updateTextHotspotStyle,
     updateTextHotspotContent = _useHotspotEditorStat.updateTextHotspotContent,
     updateDynamicHotspotSourceX = _useHotspotEditorStat.updateDynamicHotspotSourceX,
@@ -380,6 +381,8 @@ var HotspotEditorModal = function HotspotEditorModal(_ref) {
     }
     var hotspotsWithoutExampleValues = filteredHotspots.map(function (hotspot) {
       return update(hotspot, {
+        $unset: ['id'],
+        // Remove the internal id added for drag tracking
         content: {
           $unset: ['values']
         }
@@ -629,6 +632,7 @@ var HotspotEditorModal = function HotspotEditorModal(_ref) {
         hotspotDefaults: hotspotDefaults
       });
     },
+    onUpdateHotspotPosition: updateHotspotPosition,
     onSelectHotspot: setSelectedHotspot,
     selectedHotspots: getSelectedHotspotsList(selectedHotspot, hotspots),
     src: cardConfig.content.src,

package/es/components/HotspotEditorModal/hooks/hotspotStateHook.js

@@ -49,6 +49,7 @@ var hotspotActionTypes = {
   hotspotDataSourceChange: 'HOTSPOT_DATA_SOURCE_CHANGE',
   hotspotDataSourceSettingsChange: 'HOTSPOT_DATA_SOURCE_SETTINGS_CHANGE',
   hotspotTooltipChange: 'HOTSPOT_TOOLTIP_CHANGE',
+  hotspotPositionChange: 'HOTSPOT_POSITION_CHANGE',
   hotspotSelect: 'HOTSPOT_SELECT',
   hotspotsAdd: 'HOTSPOTS_ADD',
   textHotspotStyleChange: 'TEXT_HOTSPOT_STYLE_CHANGE',
@@ -151,10 +152,32 @@ function hotspotEditorReducer(state, _ref2) {
         };
         return getHotspotUpdate(state, _mergeSpec);
       }
+    // HOTSPOT POSITION CHANGE
+    case hotspotActionTypes.hotspotPositionChange:
+      {
+        var isPositionAvailable = !state.hotspots.find(function (hotspot) {
+          return isHotspotMatch(hotspot, payload.position);
+        });
+        if (isPositionAvailable) {
+          // Find the updated hotspot in the new hotspots array to maintain selection
+          var updatedSelectedHotspot = payload.newHotspots.find(function (hotspot) {
+            return isHotspotMatch(hotspot, payload.position);
+          });
+          return update(state, {
+            hotspots: {
+              $set: payload.newHotspots
+            },
+            selectedHotspot: {
+              $set: updatedSelectedHotspot
+            }
+          });
+        }
+        return state;
+      }
     // HOTSPOTS ADD
     case hotspotActionTypes.hotspotsAdd:
       {
-        var isPositionAvailable = !state.hotspots.find(function (hotspot) {
+        var _isPositionAvailable = !state.hotspots.find(function (hotspot) {
           return isHotspotMatch(hotspot, payload.position);
         });
         var defaultContent = state.currentType === hotspotTypes.TEXT ? {
@@ -165,7 +188,7 @@ function hotspotEditorReducer(state, _ref2) {
           content: defaultContent,
           type: createableType
         });
-        return isPositionAvailable ? update(state, {
+        return _isPositionAvailable ? update(state, {
           selectedHotspot: {
             $set: newHotspot
           },
@@ -193,7 +216,7 @@ function hotspotEditorReducer(state, _ref2) {
             $set: hotspot
           },
           currentType: {
-            $set: (_hotspot$type = hotspot.type) !== null && _hotspot$type !== void 0 ? _hotspot$type : defaultTypeWhenMissing
+            $set: (_hotspot$type = hotspot === null || hotspot === void 0 ? void 0 : hotspot.type) !== null && _hotspot$type !== void 0 ? _hotspot$type : defaultTypeWhenMissing
           }
         });
       }
@@ -392,6 +415,12 @@ function useHotspotEditorState() {
       payload: hotspotContent
     });
   };
+  var updateHotspotPosition = function updateHotspotPosition(hotspotPosition) {
+    return dispatch({
+      type: hotspotActionTypes.hotspotPositionChange,
+      payload: hotspotPosition
+    });
+  };
 
   /** Updates the properties of the text hotspot, passes a payload like {color: 'blue'} */
   var updateTextHotspotStyle = function updateTextHotspotStyle(textHotspotStyle) {
@@ -479,6 +508,7 @@ function useHotspotEditorState() {
     switchCurrentType: switchCurrentType,
     updateHotspotDataSource: updateHotspotDataSource,
     updateHotspotTooltip: updateHotspotTooltip,
+    updateHotspotPosition: updateHotspotPosition,
     updateTextHotspotStyle: updateTextHotspotStyle,
     updateTextHotspotContent: updateTextHotspotContent,
     updateDynamicHotspotSourceX: updateDynamicHotspotSourceX,

package/es/components/ImageCard/HotspotContent.js

@@ -174,7 +174,7 @@ var HotspotContent = function HotspotContent(_ref) {
     }, typeof value === 'number' ? formatNumberWithPrecision(value, !isNil(precision) ? precision : Math.abs(value) < 1 ? value === 0 ? 0 : 3 // for small decimals give 3 spots
     : 1,
     // otherwise 1 spot if precision isn't set
-    locale) : value, unit && value !== '--' && /*#__PURE__*/React__default.createElement("span", {
+    locale) : typeof value === 'boolean' ? String(value) : value, unit && value !== '--' && /*#__PURE__*/React__default.createElement("span", {
       className: "".concat(iotPrefix, "--hotspot-content-unit")
     }, unit))));
   }));

package/es/components/ImageCard/ImageHotspots.js

@@ -16,7 +16,7 @@ import 'core-js/modules/es.object.keys.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import React__default, { useState, useMemo, useCallback, useEffect } from 'react';
+import React__default, { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { InlineLoading } from '@carbon/react';
 import warning from 'warning';
@@ -75,6 +75,10 @@ var propTypes = {
    * Emits position obj {x, y} of hotspot to be added.
    */
   onAddHotspotPosition: PropTypes.func,
+  /** Callback when a hotspot is dragged to new position in isEditable mode
+   * Emits new hotspots and updated position obj {x, y} of hotspot.
+   */
+  onUpdateHotspotPosition: PropTypes.func,
   /** Callback when a hotspot is clicked in isEditable mode, emits position obj {x, y} */
   onSelectHotspot: PropTypes.func,
   /**
@@ -115,6 +119,7 @@ var defaultProps = {
   isHotspotDataLoading: false,
   isEditable: false,
   onAddHotspotPosition: function onAddHotspotPosition() {},
+  onUpdateHotspotPosition: function onUpdateHotspotPosition() {},
   onSelectHotspot: function onSelectHotspot() {},
   onHotspotContentChanged: function onHotspotContentChanged() {},
   background: '#eee',
@@ -233,6 +238,7 @@ var calculateHotspotContainerLayout = function calculateHotspotContainerLayout(_
   var width;
   var height;
   var top;
+  var left;
 
   // CONTAIN
   if (objectFit === 'contain') {
@@ -240,32 +246,38 @@ var calculateHotspotContainerLayout = function calculateHotspotContainerLayout(_
       width = imageWidth;
       height = imageWidth / imageRatio;
       top = imageScale > 1 ? imageOffsetY : imageObjectFitOffsetY;
+      left = imageScale > 1 ? 0 : (containerWidth - imageWidth) / 2;
     } else if (imageOrientation === 'portrait') {
       width = imageHeight / imageRatio;
       height = imageHeight;
       top = imageOffsetY;
+      left = (containerWidth - width) / 2;
     }
     // FILL
   } else if (objectFit === 'fill') {
     width = imageScale > 1 ? imageWidth : containerWidth;
     height = imageScale > 1 ? imageHeight : containerHeight;
     top = imageOffsetY;
+    left = 0;
     // NO OBJECT FIT
   } else if (!objectFit) {
     if (imageOrientation === 'landscape') {
       width = imageWidth;
       height = imageWidth / imageRatio;
       top = imageOffsetY;
+      left = 0;
     } else if (imageOrientation === 'portrait') {
       width = imageHeight / imageRatio;
       height = imageHeight;
       top = imageOffsetY;
+      left = (containerWidth - width) / 2;
     }
   }
   return {
     width: width,
     height: height,
-    top: top
+    top: top,
+    left: left
   };
 };
 var calculateObjectFitOffset = function calculateObjectFitOffset(_ref5) {
@@ -510,6 +522,7 @@ var ImageHotspots = function ImageHotspots(_ref9) {
     isEditable = _ref9.isEditable,
     isHotspotDataLoading = _ref9.isHotspotDataLoading,
     onAddHotspotPosition = _ref9.onAddHotspotPosition,
+    onUpdateHotspotPosition = _ref9.onUpdateHotspotPosition,
     onSelectHotspot = _ref9.onSelectHotspot,
     onHotspotContentChanged = _ref9.onHotspotContentChanged,
     zoomMax = _ref9.zoomMax,
@@ -554,9 +567,52 @@ var ImageHotspots = function ImageHotspots(_ref9) {
     _useState12 = _slicedToArray(_useState11, 2),
     options = _useState12[0],
     setOptions = _useState12[1];
+  // Tracks if a hotspot is being dragged and which one.
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    draggingHotspotId = _useState14[0],
+    setDraggingHotspotId = _useState14[1];
+
+  // Ref for outer container
+  var containerRef = useRef(null);
+  var dragStateRef = useRef({
+    // Flag to indicate if a drag is active
+    isDragging: false,
+    // Stores the starting mouse position of a drag
+    dragStartPosition: {
+      x: 0,
+      y: 0
+    },
+    // Tracks the current position during a drag
+    currentDargPosition: null,
+    // Stores layout of image and container
+    layout: {
+      rect: null,
+      hotspotLayout: null
+    },
+    // Tracks Scheduled Animation Frames
+    frame: null
+  });
+
+  // Minimum pixel movement before a drag is initiated
+  var DRAG_THRESHOLD = 5;
   var mergedI18n = useMemo(function () {
     return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
   }, [i18n]);
+  var hotspotsWithId = useMemo(function () {
+    return hotspots.map(function (hotspot, index) {
+      return _objectSpread(_objectSpread({}, hotspot), {}, {
+        id: "".concat(hotspot.x, "-").concat(hotspot.y, "-").concat(index)
+      });
+    });
+  }, [hotspots]);
+  var _useState15 = useState(hotspotsWithId),
+    _useState16 = _slicedToArray(_useState15, 2),
+    editableHotspots = _useState16[0],
+    setEditableHotspots = _useState16[1];
+  useEffect(function () {
+    setEditableHotspots(hotspotsWithId);
+  }, [hotspotsWithId]);
   var handleCtrlKeyUp = useCallback(function (event) {
     // Was the control key unpressed
     if (event.key === keyboardKeys.CONTROL) {
@@ -628,6 +684,11 @@ var ImageHotspots = function ImageHotspots(_ref9) {
     objectFit: displayOption
   };
   var onHotspotClicked = useCallback(function (evt, position) {
+    // prevent click behavior after drag
+    if (dragStateRef.current.isDragging) {
+      return;
+    }
+
     // It is possible to receive two events here, one Mouse event and one Pointer event.
     // When used in the ImageHotspots component the Pointer event can somehow be from a
     // previously clicked hotspot. See https://github.com/carbon-design-system/carbon-addons-iot-react/issues/1803
@@ -636,6 +697,108 @@ var ImageHotspots = function ImageHotspots(_ref9) {
       onSelectHotspot(position);
     }
   }, [onSelectHotspot, isEditable]);
+  var handleMouseDownHotspot = useCallback(function (e, id1) {
+    var hotspot = editableHotspots.find(function (h) {
+      return h.id === id1;
+    });
+    if (!isEditable || (hotspot === null || hotspot === void 0 ? void 0 : hotspot.type) === 'dynamic') {
+      return;
+    }
+    e.stopPropagation();
+    setDraggingHotspotId(id1);
+    dragStateRef.current.isDragging = true;
+    dragStateRef.current.dragStartPosition = {
+      x: e.clientX,
+      y: e.clientY
+    };
+
+    // Calculate layout once at drag start
+    if (containerRef.current) {
+      var rect = containerRef.current.getBoundingClientRect();
+      var hotspotLayout = calculateHotspotContainerLayout(image, container, displayOption);
+      dragStateRef.current.layout = {
+        rect: rect,
+        hotspotLayout: hotspotLayout
+      };
+    }
+  }, [container, displayOption, image, isEditable, editableHotspots]);
+  var handleMouseMoveHotspot = useCallback(function (e) {
+    if (draggingHotspotId !== null && containerRef.current) {
+      var _dragStateRef$current = dragStateRef.current,
+        isDragging = _dragStateRef$current.isDragging,
+        dragStartPosition = _dragStateRef$current.dragStartPosition,
+        layout = _dragStateRef$current.layout;
+      var dx = e.clientX - dragStartPosition.x;
+      var dy = e.clientY - dragStartPosition.y;
+      var distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance > DRAG_THRESHOLD && isDragging) {
+        var rect = layout.rect,
+          hotspotLayout = layout.hotspotLayout;
+        var x = (e.clientX - rect.left - hotspotLayout.left) / hotspotLayout.width * 100;
+        var y = (e.clientY - rect.top - hotspotLayout.top) / hotspotLayout.height * 100;
+        // Clamp within image boundaries
+        x = Math.max(0, Math.min(100, x));
+        y = Math.max(0, Math.min(100, y));
+        dragStateRef.current.currentDargPosition = {
+          x: x,
+          y: y
+        };
+
+        // throttle with requestAnimationFrame
+        if (dragStateRef.current.frame === null) {
+          dragStateRef.current.frame = requestAnimationFrame(function () {
+            setEditableHotspots(function (prev) {
+              return prev.map(function (item) {
+                return item.id === draggingHotspotId ? _objectSpread(_objectSpread({}, item), {}, {
+                  x: dragStateRef.current.currentDargPosition.x,
+                  y: dragStateRef.current.currentDargPosition.y
+                }) : item;
+              });
+            });
+            dragStateRef.current.frame = null;
+          });
+        }
+      }
+    }
+  }, [draggingHotspotId]);
+  var handleMouseUpHotspot = useCallback(function (e) {
+    if (draggingHotspotId !== null && dragStateRef.current.isDragging) {
+      e.stopPropagation();
+      var _ref10 = dragStateRef.current.currentDargPosition || {},
+        x = _ref10.x,
+        y = _ref10.y;
+      onUpdateHotspotPosition({
+        newHotspots: editableHotspots,
+        position: {
+          x: x,
+          y: y
+        }
+      });
+      setDraggingHotspotId(null);
+      dragStateRef.current.currentDargPosition = null;
+      dragStateRef.current.isDragging = false;
+    }
+  }, [editableHotspots, draggingHotspotId, onUpdateHotspotPosition]);
+  useEffect(function () {
+    var dragState = dragStateRef.current;
+    return function () {
+      if (dragState.frame !== null) {
+        cancelAnimationFrame(dragState.frame);
+      }
+    };
+  }, []);
+
+  // Listens to mouse movement for dragging hotspot
+  useEffect(function () {
+    if (!isEditable) return undefined;
+    var containerElement = containerRef.current;
+    containerElement.addEventListener('mousemove', handleMouseMoveHotspot);
+    containerElement.addEventListener('mouseup', handleMouseUpHotspot);
+    return function () {
+      containerElement.removeEventListener('mousemove', handleMouseMoveHotspot);
+      containerElement.removeEventListener('mouseup', handleMouseUpHotspot);
+    };
+  }, [draggingHotspotId, handleMouseMoveHotspot, handleMouseUpHotspot, isEditable]);
   var getIconRenderFunction = useCallback(function () {
     return renderIconByName || (Array.isArray(icons) ? function (name, props) {
       var _icons$find;
@@ -654,7 +817,7 @@ var ImageHotspots = function ImageHotspots(_ref9) {
 
   // Performance improvement
   var cachedHotspots = useMemo(function () {
-    return hotspots.map(function (hotspot, index) {
+    return editableHotspots.map(function (hotspot, index) {
       var _hotspot$content;
       var x = hotspot.x,
         y = hotspot.y;
@@ -664,10 +827,10 @@ var ImageHotspots = function ImageHotspots(_ref9) {
       // Determine whether the icon needs to be dynamically overridden by a threshold
       var matchingAttributeThresholds = [];
       if ((_hotspot$content = hotspot.content) !== null && _hotspot$content !== void 0 && _hotspot$content.attributes) {
-        hotspot.content.attributes.forEach(function (_ref10) {
+        hotspot.content.attributes.forEach(function (_ref11) {
           var _hotspot$content2;
-          var thresholds = _ref10.thresholds,
-            dataSourceId = _ref10.dataSourceId;
+          var thresholds = _ref11.thresholds,
+            dataSourceId = _ref11.dataSourceId;
           if (!isEmpty(thresholds) && !isEmpty((_hotspot$content2 = hotspot.content) === null || _hotspot$content2 === void 0 ? void 0 : _hotspot$content2.values)) {
             var _hotspot$content3;
             var attributeThresholds = findMatchingThresholds(thresholds.map(function (threshold) {
@@ -693,10 +856,13 @@ var ImageHotspots = function ImageHotspots(_ref9) {
         key: "".concat(x, "-").concat(y, "-").concat(index),
         renderIconByName: getIconRenderFunction(),
         isSelected: hotspotIsSelected,
-        onClick: onHotspotClicked
+        onClick: onHotspotClicked,
+        onMouseDown: function onMouseDown(e) {
+          return handleMouseDownHotspot(e, hotspot.id);
+        }
       }));
     });
-  }, [hotspots, selectedHotspots, locale, getIconRenderFunction, isEditable, onHotspotContentChanged, mergedI18n, onHotspotClicked]);
+  }, [editableHotspots, selectedHotspots, locale, getIconRenderFunction, isEditable, onHotspotContentChanged, mergedI18n, onHotspotClicked, handleMouseDownHotspot]);
   var hotspotsStyle = {
     position: 'absolute',
     left: image.offsetX,
@@ -739,7 +905,8 @@ var ImageHotspots = function ImageHotspots(_ref9) {
         // If we leave the container, stop detecting the drag
         stopDrag(cursor, setCursor);
       }
-    }
+    },
+    ref: containerRef
   }, src ? /*#__PURE__*/React__default.createElement("img", {
     id: id,
     className: "".concat(iotPrefix, "--image-card-img"),
@@ -966,6 +1133,17 @@ ImageHotspots.__docgenInfo = {
       },
       "required": false
     },
+    "onUpdateHotspotPosition": {
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      },
+      "description": "Callback when a hotspot is dragged to new position in isEditable mode\nEmits new hotspots and updated position obj {x, y} of hotspot.",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
     "onSelectHotspot": {
       "defaultValue": {
         "value": "() => {}",

package/lib/components/HotspotEditorModal/HotspotEditorModal.js

@@ -332,6 +332,7 @@ var HotspotEditorModal = function HotspotEditorModal(_ref) {
     switchCurrentType = _useHotspotEditorStat.switchCurrentType,
     updateHotspotDataSource = _useHotspotEditorStat.updateHotspotDataSource,
     updateHotspotTooltip = _useHotspotEditorStat.updateHotspotTooltip,
+    updateHotspotPosition = _useHotspotEditorStat.updateHotspotPosition,
     updateTextHotspotStyle = _useHotspotEditorStat.updateTextHotspotStyle,
     updateTextHotspotContent = _useHotspotEditorStat.updateTextHotspotContent,
     updateDynamicHotspotSourceX = _useHotspotEditorStat.updateDynamicHotspotSourceX,
@@ -397,6 +398,8 @@ var HotspotEditorModal = function HotspotEditorModal(_ref) {
     }
     var hotspotsWithoutExampleValues = filteredHotspots.map(function (hotspot) {
       return update__default.default(hotspot, {
+        $unset: ['id'],
+        // Remove the internal id added for drag tracking
         content: {
           $unset: ['values']
         }
@@ -646,6 +649,7 @@ var HotspotEditorModal = function HotspotEditorModal(_ref) {
         hotspotDefaults: hotspotDefaults
       });
     },
+    onUpdateHotspotPosition: updateHotspotPosition,
     onSelectHotspot: setSelectedHotspot,
     selectedHotspots: getSelectedHotspotsList(selectedHotspot, hotspots),
     src: cardConfig.content.src,

package/lib/components/HotspotEditorModal/hooks/hotspotStateHook.js

@@ -77,6 +77,7 @@ var hotspotActionTypes = {
   hotspotDataSourceChange: 'HOTSPOT_DATA_SOURCE_CHANGE',
   hotspotDataSourceSettingsChange: 'HOTSPOT_DATA_SOURCE_SETTINGS_CHANGE',
   hotspotTooltipChange: 'HOTSPOT_TOOLTIP_CHANGE',
+  hotspotPositionChange: 'HOTSPOT_POSITION_CHANGE',
   hotspotSelect: 'HOTSPOT_SELECT',
   hotspotsAdd: 'HOTSPOTS_ADD',
   textHotspotStyleChange: 'TEXT_HOTSPOT_STYLE_CHANGE',
@@ -179,10 +180,32 @@ function hotspotEditorReducer(state, _ref2) {
         };
         return getHotspotUpdate(state, _mergeSpec);
       }
+    // HOTSPOT POSITION CHANGE
+    case hotspotActionTypes.hotspotPositionChange:
+      {
+        var isPositionAvailable = !state.hotspots.find(function (hotspot) {
+          return isHotspotMatch(hotspot, payload.position);
+        });
+        if (isPositionAvailable) {
+          // Find the updated hotspot in the new hotspots array to maintain selection
+          var updatedSelectedHotspot = payload.newHotspots.find(function (hotspot) {
+            return isHotspotMatch(hotspot, payload.position);
+          });
+          return update__default.default(state, {
+            hotspots: {
+              $set: payload.newHotspots
+            },
+            selectedHotspot: {
+              $set: updatedSelectedHotspot
+            }
+          });
+        }
+        return state;
+      }
     // HOTSPOTS ADD
     case hotspotActionTypes.hotspotsAdd:
       {
-        var isPositionAvailable = !state.hotspots.find(function (hotspot) {
+        var _isPositionAvailable = !state.hotspots.find(function (hotspot) {
           return isHotspotMatch(hotspot, payload.position);
         });
         var defaultContent = state.currentType === hotspotTypes.TEXT ? {
@@ -193,7 +216,7 @@ function hotspotEditorReducer(state, _ref2) {
           content: defaultContent,
           type: createableType
         });
-        return isPositionAvailable ? update__default.default(state, {
+        return _isPositionAvailable ? update__default.default(state, {
           selectedHotspot: {
             $set: newHotspot
           },
@@ -221,7 +244,7 @@ function hotspotEditorReducer(state, _ref2) {
             $set: hotspot
           },
           currentType: {
-            $set: (_hotspot$type = hotspot.type) !== null && _hotspot$type !== void 0 ? _hotspot$type : defaultTypeWhenMissing
+            $set: (_hotspot$type = hotspot === null || hotspot === void 0 ? void 0 : hotspot.type) !== null && _hotspot$type !== void 0 ? _hotspot$type : defaultTypeWhenMissing
           }
         });
       }
@@ -420,6 +443,12 @@ function useHotspotEditorState() {
       payload: hotspotContent
     });
   };
+  var updateHotspotPosition = function updateHotspotPosition(hotspotPosition) {
+    return dispatch({
+      type: hotspotActionTypes.hotspotPositionChange,
+      payload: hotspotPosition
+    });
+  };
 
   /** Updates the properties of the text hotspot, passes a payload like {color: 'blue'} */
   var updateTextHotspotStyle = function updateTextHotspotStyle(textHotspotStyle) {
@@ -507,6 +536,7 @@ function useHotspotEditorState() {
     switchCurrentType: switchCurrentType,
     updateHotspotDataSource: updateHotspotDataSource,
     updateHotspotTooltip: updateHotspotTooltip,
+    updateHotspotPosition: updateHotspotPosition,
     updateTextHotspotStyle: updateTextHotspotStyle,
     updateTextHotspotContent: updateTextHotspotContent,
     updateDynamicHotspotSourceX: updateDynamicHotspotSourceX,

package/lib/components/ImageCard/HotspotContent.js

@@ -182,7 +182,7 @@ var HotspotContent = function HotspotContent(_ref) {
     }, typeof value === 'number' ? cardUtilityFunctions.formatNumberWithPrecision(value, !isNil(precision) ? precision : Math.abs(value) < 1 ? value === 0 ? 0 : 3 // for small decimals give 3 spots
     : 1,
     // otherwise 1 spot if precision isn't set
-    locale) : value, unit && value !== '--' && /*#__PURE__*/React__default.default.createElement("span", {
+    locale) : typeof value === 'boolean' ? String(value) : value, unit && value !== '--' && /*#__PURE__*/React__default.default.createElement("span", {
       className: "".concat(iotPrefix, "--hotspot-content-unit")
     }, unit))));
   }));

package/lib/components/ImageCard/ImageHotspots.js

@@ -89,6 +89,10 @@ var propTypes = {
    * Emits position obj {x, y} of hotspot to be added.
    */
   onAddHotspotPosition: PropTypes__default.default.func,
+  /** Callback when a hotspot is dragged to new position in isEditable mode
+   * Emits new hotspots and updated position obj {x, y} of hotspot.
+   */
+  onUpdateHotspotPosition: PropTypes__default.default.func,
   /** Callback when a hotspot is clicked in isEditable mode, emits position obj {x, y} */
   onSelectHotspot: PropTypes__default.default.func,
   /**
@@ -129,6 +133,7 @@ var defaultProps = {
   isHotspotDataLoading: false,
   isEditable: false,
   onAddHotspotPosition: function onAddHotspotPosition() {},
+  onUpdateHotspotPosition: function onUpdateHotspotPosition() {},
   onSelectHotspot: function onSelectHotspot() {},
   onHotspotContentChanged: function onHotspotContentChanged() {},
   background: '#eee',
@@ -247,6 +252,7 @@ var calculateHotspotContainerLayout = function calculateHotspotContainerLayout(_
   var width;
   var height;
   var top;
+  var left;
 
   // CONTAIN
   if (objectFit === 'contain') {
@@ -254,32 +260,38 @@ var calculateHotspotContainerLayout = function calculateHotspotContainerLayout(_
       width = imageWidth;
       height = imageWidth / imageRatio;
       top = imageScale > 1 ? imageOffsetY : imageObjectFitOffsetY;
+      left = imageScale > 1 ? 0 : (containerWidth - imageWidth) / 2;
     } else if (imageOrientation === 'portrait') {
       width = imageHeight / imageRatio;
       height = imageHeight;
       top = imageOffsetY;
+      left = (containerWidth - width) / 2;
     }
     // FILL
   } else if (objectFit === 'fill') {
     width = imageScale > 1 ? imageWidth : containerWidth;
     height = imageScale > 1 ? imageHeight : containerHeight;
     top = imageOffsetY;
+    left = 0;
     // NO OBJECT FIT
   } else if (!objectFit) {
     if (imageOrientation === 'landscape') {
       width = imageWidth;
       height = imageWidth / imageRatio;
       top = imageOffsetY;
+      left = 0;
     } else if (imageOrientation === 'portrait') {
       width = imageHeight / imageRatio;
       height = imageHeight;
       top = imageOffsetY;
+      left = (containerWidth - width) / 2;
     }
   }
   return {
     width: width,
     height: height,
-    top: top
+    top: top,
+    left: left
   };
 };
 var calculateObjectFitOffset = function calculateObjectFitOffset(_ref5) {
@@ -524,6 +536,7 @@ var ImageHotspots = function ImageHotspots(_ref9) {
     isEditable = _ref9.isEditable,
     isHotspotDataLoading = _ref9.isHotspotDataLoading,
     onAddHotspotPosition = _ref9.onAddHotspotPosition,
+    onUpdateHotspotPosition = _ref9.onUpdateHotspotPosition,
     onSelectHotspot = _ref9.onSelectHotspot,
     onHotspotContentChanged = _ref9.onHotspotContentChanged,
     zoomMax = _ref9.zoomMax,
@@ -568,9 +581,52 @@ var ImageHotspots = function ImageHotspots(_ref9) {
     _useState12 = _slicedToArray__default.default(_useState11, 2),
     options = _useState12[0],
     setOptions = _useState12[1];
+  // Tracks if a hotspot is being dragged and which one.
+  var _useState13 = React.useState(null),
+    _useState14 = _slicedToArray__default.default(_useState13, 2),
+    draggingHotspotId = _useState14[0],
+    setDraggingHotspotId = _useState14[1];
+
+  // Ref for outer container
+  var containerRef = React.useRef(null);
+  var dragStateRef = React.useRef({
+    // Flag to indicate if a drag is active
+    isDragging: false,
+    // Stores the starting mouse position of a drag
+    dragStartPosition: {
+      x: 0,
+      y: 0
+    },
+    // Tracks the current position during a drag
+    currentDargPosition: null,
+    // Stores layout of image and container
+    layout: {
+      rect: null,
+      hotspotLayout: null
+    },
+    // Tracks Scheduled Animation Frames
+    frame: null
+  });
+
+  // Minimum pixel movement before a drag is initiated
+  var DRAG_THRESHOLD = 5;
   var mergedI18n = React.useMemo(function () {
     return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
   }, [i18n]);
+  var hotspotsWithId = React.useMemo(function () {
+    return hotspots.map(function (hotspot, index) {
+      return _objectSpread(_objectSpread({}, hotspot), {}, {
+        id: "".concat(hotspot.x, "-").concat(hotspot.y, "-").concat(index)
+      });
+    });
+  }, [hotspots]);
+  var _useState15 = React.useState(hotspotsWithId),
+    _useState16 = _slicedToArray__default.default(_useState15, 2),
+    editableHotspots = _useState16[0],
+    setEditableHotspots = _useState16[1];
+  React.useEffect(function () {
+    setEditableHotspots(hotspotsWithId);
+  }, [hotspotsWithId]);
   var handleCtrlKeyUp = React.useCallback(function (event) {
     // Was the control key unpressed
     if (event.key === KeyCodeConstants.keyboardKeys.CONTROL) {
@@ -642,6 +698,11 @@ var ImageHotspots = function ImageHotspots(_ref9) {
     objectFit: displayOption
   };
   var onHotspotClicked = React.useCallback(function (evt, position) {
+    // prevent click behavior after drag
+    if (dragStateRef.current.isDragging) {
+      return;
+    }
+
     // It is possible to receive two events here, one Mouse event and one Pointer event.
     // When used in the ImageHotspots component the Pointer event can somehow be from a
     // previously clicked hotspot. See https://github.com/carbon-design-system/carbon-addons-iot-react/issues/1803
@@ -650,6 +711,108 @@ var ImageHotspots = function ImageHotspots(_ref9) {
       onSelectHotspot(position);
     }
   }, [onSelectHotspot, isEditable]);
+  var handleMouseDownHotspot = React.useCallback(function (e, id1) {
+    var hotspot = editableHotspots.find(function (h) {
+      return h.id === id1;
+    });
+    if (!isEditable || (hotspot === null || hotspot === void 0 ? void 0 : hotspot.type) === 'dynamic') {
+      return;
+    }
+    e.stopPropagation();
+    setDraggingHotspotId(id1);
+    dragStateRef.current.isDragging = true;
+    dragStateRef.current.dragStartPosition = {
+      x: e.clientX,
+      y: e.clientY
+    };
+
+    // Calculate layout once at drag start
+    if (containerRef.current) {
+      var rect = containerRef.current.getBoundingClientRect();
+      var hotspotLayout = calculateHotspotContainerLayout(image, container, displayOption);
+      dragStateRef.current.layout = {
+        rect: rect,
+        hotspotLayout: hotspotLayout
+      };
+    }
+  }, [container, displayOption, image, isEditable, editableHotspots]);
+  var handleMouseMoveHotspot = React.useCallback(function (e) {
+    if (draggingHotspotId !== null && containerRef.current) {
+      var _dragStateRef$current = dragStateRef.current,
+        isDragging = _dragStateRef$current.isDragging,
+        dragStartPosition = _dragStateRef$current.dragStartPosition,
+        layout = _dragStateRef$current.layout;
+      var dx = e.clientX - dragStartPosition.x;
+      var dy = e.clientY - dragStartPosition.y;
+      var distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance > DRAG_THRESHOLD && isDragging) {
+        var rect = layout.rect,
+          hotspotLayout = layout.hotspotLayout;
+        var x = (e.clientX - rect.left - hotspotLayout.left) / hotspotLayout.width * 100;
+        var y = (e.clientY - rect.top - hotspotLayout.top) / hotspotLayout.height * 100;
+        // Clamp within image boundaries
+        x = Math.max(0, Math.min(100, x));
+        y = Math.max(0, Math.min(100, y));
+        dragStateRef.current.currentDargPosition = {
+          x: x,
+          y: y
+        };
+
+        // throttle with requestAnimationFrame
+        if (dragStateRef.current.frame === null) {
+          dragStateRef.current.frame = requestAnimationFrame(function () {
+            setEditableHotspots(function (prev) {
+              return prev.map(function (item) {
+                return item.id === draggingHotspotId ? _objectSpread(_objectSpread({}, item), {}, {
+                  x: dragStateRef.current.currentDargPosition.x,
+                  y: dragStateRef.current.currentDargPosition.y
+                }) : item;
+              });
+            });
+            dragStateRef.current.frame = null;
+          });
+        }
+      }
+    }
+  }, [draggingHotspotId]);
+  var handleMouseUpHotspot = React.useCallback(function (e) {
+    if (draggingHotspotId !== null && dragStateRef.current.isDragging) {
+      e.stopPropagation();
+      var _ref10 = dragStateRef.current.currentDargPosition || {},
+        x = _ref10.x,
+        y = _ref10.y;
+      onUpdateHotspotPosition({
+        newHotspots: editableHotspots,
+        position: {
+          x: x,
+          y: y
+        }
+      });
+      setDraggingHotspotId(null);
+      dragStateRef.current.currentDargPosition = null;
+      dragStateRef.current.isDragging = false;
+    }
+  }, [editableHotspots, draggingHotspotId, onUpdateHotspotPosition]);
+  React.useEffect(function () {
+    var dragState = dragStateRef.current;
+    return function () {
+      if (dragState.frame !== null) {
+        cancelAnimationFrame(dragState.frame);
+      }
+    };
+  }, []);
+
+  // Listens to mouse movement for dragging hotspot
+  React.useEffect(function () {
+    if (!isEditable) return undefined;
+    var containerElement = containerRef.current;
+    containerElement.addEventListener('mousemove', handleMouseMoveHotspot);
+    containerElement.addEventListener('mouseup', handleMouseUpHotspot);
+    return function () {
+      containerElement.removeEventListener('mousemove', handleMouseMoveHotspot);
+      containerElement.removeEventListener('mouseup', handleMouseUpHotspot);
+    };
+  }, [draggingHotspotId, handleMouseMoveHotspot, handleMouseUpHotspot, isEditable]);
   var getIconRenderFunction = React.useCallback(function () {
     return renderIconByName || (Array.isArray(icons) ? function (name, props) {
       var _icons$find;
@@ -668,7 +831,7 @@ var ImageHotspots = function ImageHotspots(_ref9) {
 
   // Performance improvement
   var cachedHotspots = React.useMemo(function () {
-    return hotspots.map(function (hotspot, index) {
+    return editableHotspots.map(function (hotspot, index) {
       var _hotspot$content;
       var x = hotspot.x,
         y = hotspot.y;
@@ -678,10 +841,10 @@ var ImageHotspots = function ImageHotspots(_ref9) {
       // Determine whether the icon needs to be dynamically overridden by a threshold
       var matchingAttributeThresholds = [];
       if ((_hotspot$content = hotspot.content) !== null && _hotspot$content !== void 0 && _hotspot$content.attributes) {
-        hotspot.content.attributes.forEach(function (_ref10) {
+        hotspot.content.attributes.forEach(function (_ref11) {
           var _hotspot$content2;
-          var thresholds = _ref10.thresholds,
-            dataSourceId = _ref10.dataSourceId;
+          var thresholds = _ref11.thresholds,
+            dataSourceId = _ref11.dataSourceId;
           if (!isEmpty(thresholds) && !isEmpty((_hotspot$content2 = hotspot.content) === null || _hotspot$content2 === void 0 ? void 0 : _hotspot$content2.values)) {
             var _hotspot$content3;
             var attributeThresholds = cardUtilityFunctions.findMatchingThresholds(thresholds.map(function (threshold) {
@@ -707,10 +870,13 @@ var ImageHotspots = function ImageHotspots(_ref9) {
         key: "".concat(x, "-").concat(y, "-").concat(index),
         renderIconByName: getIconRenderFunction(),
         isSelected: hotspotIsSelected,
-        onClick: onHotspotClicked
+        onClick: onHotspotClicked,
+        onMouseDown: function onMouseDown(e) {
+          return handleMouseDownHotspot(e, hotspot.id);
+        }
       }));
     });
-  }, [hotspots, selectedHotspots, locale, getIconRenderFunction, isEditable, onHotspotContentChanged, mergedI18n, onHotspotClicked]);
+  }, [editableHotspots, selectedHotspots, locale, getIconRenderFunction, isEditable, onHotspotContentChanged, mergedI18n, onHotspotClicked, handleMouseDownHotspot]);
   var hotspotsStyle = {
     position: 'absolute',
     left: image.offsetX,
@@ -753,7 +919,8 @@ var ImageHotspots = function ImageHotspots(_ref9) {
         // If we leave the container, stop detecting the drag
         stopDrag(cursor, setCursor);
       }
-    }
+    },
+    ref: containerRef
   }, src ? /*#__PURE__*/React__default.default.createElement("img", {
     id: id,
     className: "".concat(iotPrefix, "--image-card-img"),
@@ -980,6 +1147,17 @@ ImageHotspots.__docgenInfo = {
       },
       "required": false
     },
+    "onUpdateHotspotPosition": {
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      },
+      "description": "Callback when a hotspot is dragged to new position in isEditable mode\nEmits new hotspots and updated position obj {x, y} of hotspot.",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
     "onSelectHotspot": {
       "defaultValue": {
         "value": "() => {}",

package/package.json

@@ -353,7 +353,7 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "5.8.1",
+  "version": "5.8.2",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2",

package/umd/carbon-addons-iot-react.js

@@ -302625,7 +302625,7 @@ ${formatRule(Codicon.menuSubmenu)}
       }, typeof value === 'number' ? formatNumberWithPrecision(value, !isNil(precision) ? precision : Math.abs(value) < 1 ? value === 0 ? 0 : 3 // for small decimals give 3 spots
       : 1,
       // otherwise 1 spot if precision isn't set
-      locale) : value, unit && value !== '--' && /*#__PURE__*/React$1.createElement("span", {
+      locale) : typeof value === 'boolean' ? String(value) : value, unit && value !== '--' && /*#__PURE__*/React$1.createElement("span", {
         className: "".concat(iotPrefix$Z, "--hotspot-content-unit")
       }, unit))));
     }));
@@ -302766,6 +302766,10 @@ ${formatRule(Codicon.menuSubmenu)}
      * Emits position obj {x, y} of hotspot to be added.
      */
     onAddHotspotPosition: PropTypes.func,
+    /** Callback when a hotspot is dragged to new position in isEditable mode
+     * Emits new hotspots and updated position obj {x, y} of hotspot.
+     */
+    onUpdateHotspotPosition: PropTypes.func,
     /** Callback when a hotspot is clicked in isEditable mode, emits position obj {x, y} */
     onSelectHotspot: PropTypes.func,
     /**
@@ -302806,6 +302810,7 @@ ${formatRule(Codicon.menuSubmenu)}
     isHotspotDataLoading: false,
     isEditable: false,
     onAddHotspotPosition: function onAddHotspotPosition() {},
+    onUpdateHotspotPosition: function onUpdateHotspotPosition() {},
     onSelectHotspot: function onSelectHotspot() {},
     onHotspotContentChanged: function onHotspotContentChanged() {},
     background: '#eee',
@@ -302924,6 +302929,7 @@ ${formatRule(Codicon.menuSubmenu)}
     var width;
     var height;
     var top;
+    var left;
 
     // CONTAIN
     if (objectFit === 'contain') {
@@ -302931,32 +302937,38 @@ ${formatRule(Codicon.menuSubmenu)}
         width = imageWidth;
         height = imageWidth / imageRatio;
         top = imageScale > 1 ? imageOffsetY : imageObjectFitOffsetY;
+        left = imageScale > 1 ? 0 : (containerWidth - imageWidth) / 2;
       } else if (imageOrientation === 'portrait') {
         width = imageHeight / imageRatio;
         height = imageHeight;
         top = imageOffsetY;
+        left = (containerWidth - width) / 2;
       }
       // FILL
     } else if (objectFit === 'fill') {
       width = imageScale > 1 ? imageWidth : containerWidth;
       height = imageScale > 1 ? imageHeight : containerHeight;
       top = imageOffsetY;
+      left = 0;
       // NO OBJECT FIT
     } else if (!objectFit) {
       if (imageOrientation === 'landscape') {
         width = imageWidth;
         height = imageWidth / imageRatio;
         top = imageOffsetY;
+        left = 0;
       } else if (imageOrientation === 'portrait') {
         width = imageHeight / imageRatio;
         height = imageHeight;
         top = imageOffsetY;
+        left = (containerWidth - width) / 2;
       }
     }
     return {
       width: width,
       height: height,
-      top: top
+      top: top,
+      left: left
     };
   };
   var calculateObjectFitOffset = function calculateObjectFitOffset(_ref5) {
@@ -303201,6 +303213,7 @@ ${formatRule(Codicon.menuSubmenu)}
       isEditable = _ref9.isEditable,
       isHotspotDataLoading = _ref9.isHotspotDataLoading,
       onAddHotspotPosition = _ref9.onAddHotspotPosition,
+      onUpdateHotspotPosition = _ref9.onUpdateHotspotPosition,
       onSelectHotspot = _ref9.onSelectHotspot,
       onHotspotContentChanged = _ref9.onHotspotContentChanged,
       zoomMax = _ref9.zoomMax,
@@ -303245,9 +303258,52 @@ ${formatRule(Codicon.menuSubmenu)}
       _useState12 = _slicedToArray$9(_useState11, 2),
       options = _useState12[0],
       setOptions = _useState12[1];
+    // Tracks if a hotspot is being dragged and which one.
+    var _useState13 = React$1.useState(null),
+      _useState14 = _slicedToArray$9(_useState13, 2),
+      draggingHotspotId = _useState14[0],
+      setDraggingHotspotId = _useState14[1];
+
+    // Ref for outer container
+    var containerRef = React$1.useRef(null);
+    var dragStateRef = React$1.useRef({
+      // Flag to indicate if a drag is active
+      isDragging: false,
+      // Stores the starting mouse position of a drag
+      dragStartPosition: {
+        x: 0,
+        y: 0
+      },
+      // Tracks the current position during a drag
+      currentDargPosition: null,
+      // Stores layout of image and container
+      layout: {
+        rect: null,
+        hotspotLayout: null
+      },
+      // Tracks Scheduled Animation Frames
+      frame: null
+    });
+
+    // Minimum pixel movement before a drag is initiated
+    var DRAG_THRESHOLD = 5;
     var mergedI18n = React$1.useMemo(function () {
       return _objectSpread$T(_objectSpread$T({}, defaultProps$13.i18n), i18n);
     }, [i18n]);
+    var hotspotsWithId = React$1.useMemo(function () {
+      return hotspots.map(function (hotspot, index) {
+        return _objectSpread$T(_objectSpread$T({}, hotspot), {}, {
+          id: "".concat(hotspot.x, "-").concat(hotspot.y, "-").concat(index)
+        });
+      });
+    }, [hotspots]);
+    var _useState15 = React$1.useState(hotspotsWithId),
+      _useState16 = _slicedToArray$9(_useState15, 2),
+      editableHotspots = _useState16[0],
+      setEditableHotspots = _useState16[1];
+    React$1.useEffect(function () {
+      setEditableHotspots(hotspotsWithId);
+    }, [hotspotsWithId]);
     var handleCtrlKeyUp = React$1.useCallback(function (event) {
       // Was the control key unpressed
       if (event.key === keyboardKeys.CONTROL) {
@@ -303319,6 +303375,11 @@ ${formatRule(Codicon.menuSubmenu)}
       objectFit: displayOption
     };
     var onHotspotClicked = React$1.useCallback(function (evt, position) {
+      // prevent click behavior after drag
+      if (dragStateRef.current.isDragging) {
+        return;
+      }
+
       // It is possible to receive two events here, one Mouse event and one Pointer event.
       // When used in the ImageHotspots component the Pointer event can somehow be from a
       // previously clicked hotspot. See https://github.com/carbon-design-system/carbon-addons-iot-react/issues/1803
@@ -303327,6 +303388,108 @@ ${formatRule(Codicon.menuSubmenu)}
         onSelectHotspot(position);
       }
     }, [onSelectHotspot, isEditable]);
+    var handleMouseDownHotspot = React$1.useCallback(function (e, id1) {
+      var hotspot = editableHotspots.find(function (h) {
+        return h.id === id1;
+      });
+      if (!isEditable || (hotspot === null || hotspot === void 0 ? void 0 : hotspot.type) === 'dynamic') {
+        return;
+      }
+      e.stopPropagation();
+      setDraggingHotspotId(id1);
+      dragStateRef.current.isDragging = true;
+      dragStateRef.current.dragStartPosition = {
+        x: e.clientX,
+        y: e.clientY
+      };
+
+      // Calculate layout once at drag start
+      if (containerRef.current) {
+        var rect = containerRef.current.getBoundingClientRect();
+        var hotspotLayout = calculateHotspotContainerLayout(image, container, displayOption);
+        dragStateRef.current.layout = {
+          rect: rect,
+          hotspotLayout: hotspotLayout
+        };
+      }
+    }, [container, displayOption, image, isEditable, editableHotspots]);
+    var handleMouseMoveHotspot = React$1.useCallback(function (e) {
+      if (draggingHotspotId !== null && containerRef.current) {
+        var _dragStateRef$current = dragStateRef.current,
+          isDragging = _dragStateRef$current.isDragging,
+          dragStartPosition = _dragStateRef$current.dragStartPosition,
+          layout = _dragStateRef$current.layout;
+        var dx = e.clientX - dragStartPosition.x;
+        var dy = e.clientY - dragStartPosition.y;
+        var distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance > DRAG_THRESHOLD && isDragging) {
+          var rect = layout.rect,
+            hotspotLayout = layout.hotspotLayout;
+          var x = (e.clientX - rect.left - hotspotLayout.left) / hotspotLayout.width * 100;
+          var y = (e.clientY - rect.top - hotspotLayout.top) / hotspotLayout.height * 100;
+          // Clamp within image boundaries
+          x = Math.max(0, Math.min(100, x));
+          y = Math.max(0, Math.min(100, y));
+          dragStateRef.current.currentDargPosition = {
+            x: x,
+            y: y
+          };
+
+          // throttle with requestAnimationFrame
+          if (dragStateRef.current.frame === null) {
+            dragStateRef.current.frame = requestAnimationFrame(function () {
+              setEditableHotspots(function (prev) {
+                return prev.map(function (item) {
+                  return item.id === draggingHotspotId ? _objectSpread$T(_objectSpread$T({}, item), {}, {
+                    x: dragStateRef.current.currentDargPosition.x,
+                    y: dragStateRef.current.currentDargPosition.y
+                  }) : item;
+                });
+              });
+              dragStateRef.current.frame = null;
+            });
+          }
+        }
+      }
+    }, [draggingHotspotId]);
+    var handleMouseUpHotspot = React$1.useCallback(function (e) {
+      if (draggingHotspotId !== null && dragStateRef.current.isDragging) {
+        e.stopPropagation();
+        var _ref10 = dragStateRef.current.currentDargPosition || {},
+          x = _ref10.x,
+          y = _ref10.y;
+        onUpdateHotspotPosition({
+          newHotspots: editableHotspots,
+          position: {
+            x: x,
+            y: y
+          }
+        });
+        setDraggingHotspotId(null);
+        dragStateRef.current.currentDargPosition = null;
+        dragStateRef.current.isDragging = false;
+      }
+    }, [editableHotspots, draggingHotspotId, onUpdateHotspotPosition]);
+    React$1.useEffect(function () {
+      var dragState = dragStateRef.current;
+      return function () {
+        if (dragState.frame !== null) {
+          cancelAnimationFrame(dragState.frame);
+        }
+      };
+    }, []);
+
+    // Listens to mouse movement for dragging hotspot
+    React$1.useEffect(function () {
+      if (!isEditable) return undefined;
+      var containerElement = containerRef.current;
+      containerElement.addEventListener('mousemove', handleMouseMoveHotspot);
+      containerElement.addEventListener('mouseup', handleMouseUpHotspot);
+      return function () {
+        containerElement.removeEventListener('mousemove', handleMouseMoveHotspot);
+        containerElement.removeEventListener('mouseup', handleMouseUpHotspot);
+      };
+    }, [draggingHotspotId, handleMouseMoveHotspot, handleMouseUpHotspot, isEditable]);
     var getIconRenderFunction = React$1.useCallback(function () {
       return renderIconByName || (Array.isArray(icons) ? function (name, props) {
         var _icons$find;
@@ -303345,7 +303508,7 @@ ${formatRule(Codicon.menuSubmenu)}
 
     // Performance improvement
     var cachedHotspots = React$1.useMemo(function () {
-      return hotspots.map(function (hotspot, index) {
+      return editableHotspots.map(function (hotspot, index) {
         var _hotspot$content;
         var x = hotspot.x,
           y = hotspot.y;
@@ -303355,10 +303518,10 @@ ${formatRule(Codicon.menuSubmenu)}
         // Determine whether the icon needs to be dynamically overridden by a threshold
         var matchingAttributeThresholds = [];
         if ((_hotspot$content = hotspot.content) !== null && _hotspot$content !== void 0 && _hotspot$content.attributes) {
-          hotspot.content.attributes.forEach(function (_ref10) {
+          hotspot.content.attributes.forEach(function (_ref11) {
             var _hotspot$content2;
-            var thresholds = _ref10.thresholds,
-              dataSourceId = _ref10.dataSourceId;
+            var thresholds = _ref11.thresholds,
+              dataSourceId = _ref11.dataSourceId;
             if (!isEmpty(thresholds) && !isEmpty((_hotspot$content2 = hotspot.content) === null || _hotspot$content2 === void 0 ? void 0 : _hotspot$content2.values)) {
               var _hotspot$content3;
               var attributeThresholds = findMatchingThresholds(thresholds.map(function (threshold) {
@@ -303384,10 +303547,13 @@ ${formatRule(Codicon.menuSubmenu)}
           key: "".concat(x, "-").concat(y, "-").concat(index),
           renderIconByName: getIconRenderFunction(),
           isSelected: hotspotIsSelected,
-          onClick: onHotspotClicked
+          onClick: onHotspotClicked,
+          onMouseDown: function onMouseDown(e) {
+            return handleMouseDownHotspot(e, hotspot.id);
+          }
         }));
       });
-    }, [hotspots, selectedHotspots, locale, getIconRenderFunction, isEditable, onHotspotContentChanged, mergedI18n, onHotspotClicked]);
+    }, [editableHotspots, selectedHotspots, locale, getIconRenderFunction, isEditable, onHotspotContentChanged, mergedI18n, onHotspotClicked, handleMouseDownHotspot]);
     var hotspotsStyle = {
       position: 'absolute',
       left: image.offsetX,
@@ -303430,7 +303596,8 @@ ${formatRule(Codicon.menuSubmenu)}
           // If we leave the container, stop detecting the drag
           stopDrag(cursor, setCursor);
         }
-      }
+      },
+      ref: containerRef
     }, src ? /*#__PURE__*/React$1.createElement("img", {
       id: id,
       className: "".concat(iotPrefix$Y, "--image-card-img"),
@@ -303657,6 +303824,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "onUpdateHotspotPosition": {
+        "defaultValue": {
+          "value": "() => {}",
+          "computed": false
+        },
+        "description": "Callback when a hotspot is dragged to new position in isEditable mode\nEmits new hotspots and updated position obj {x, y} of hotspot.",
+        "type": {
+          "name": "func"
+        },
+        "required": false
+      },
       "onSelectHotspot": {
         "defaultValue": {
           "value": "() => {}",
@@ -316150,6 +316328,7 @@ ${formatRule(Codicon.menuSubmenu)}
     hotspotDataSourceChange: 'HOTSPOT_DATA_SOURCE_CHANGE',
     hotspotDataSourceSettingsChange: 'HOTSPOT_DATA_SOURCE_SETTINGS_CHANGE',
     hotspotTooltipChange: 'HOTSPOT_TOOLTIP_CHANGE',
+    hotspotPositionChange: 'HOTSPOT_POSITION_CHANGE',
     hotspotSelect: 'HOTSPOT_SELECT',
     hotspotsAdd: 'HOTSPOTS_ADD',
     textHotspotStyleChange: 'TEXT_HOTSPOT_STYLE_CHANGE',
@@ -316252,10 +316431,32 @@ ${formatRule(Codicon.menuSubmenu)}
           };
           return getHotspotUpdate(state, _mergeSpec);
         }
+      // HOTSPOT POSITION CHANGE
+      case hotspotActionTypes.hotspotPositionChange:
+        {
+          var isPositionAvailable = !state.hotspots.find(function (hotspot) {
+            return isHotspotMatch(hotspot, payload.position);
+          });
+          if (isPositionAvailable) {
+            // Find the updated hotspot in the new hotspots array to maintain selection
+            var updatedSelectedHotspot = payload.newHotspots.find(function (hotspot) {
+              return isHotspotMatch(hotspot, payload.position);
+            });
+            return update(state, {
+              hotspots: {
+                $set: payload.newHotspots
+              },
+              selectedHotspot: {
+                $set: updatedSelectedHotspot
+              }
+            });
+          }
+          return state;
+        }
       // HOTSPOTS ADD
       case hotspotActionTypes.hotspotsAdd:
         {
-          var isPositionAvailable = !state.hotspots.find(function (hotspot) {
+          var _isPositionAvailable = !state.hotspots.find(function (hotspot) {
             return isHotspotMatch(hotspot, payload.position);
           });
           var defaultContent = state.currentType === hotspotTypes.TEXT ? {
@@ -316266,7 +316467,7 @@ ${formatRule(Codicon.menuSubmenu)}
             content: defaultContent,
             type: createableType
           });
-          return isPositionAvailable ? update(state, {
+          return _isPositionAvailable ? update(state, {
             selectedHotspot: {
               $set: newHotspot
             },
@@ -316294,7 +316495,7 @@ ${formatRule(Codicon.menuSubmenu)}
               $set: hotspot
             },
             currentType: {
-              $set: (_hotspot$type = hotspot.type) !== null && _hotspot$type !== void 0 ? _hotspot$type : defaultTypeWhenMissing
+              $set: (_hotspot$type = hotspot === null || hotspot === void 0 ? void 0 : hotspot.type) !== null && _hotspot$type !== void 0 ? _hotspot$type : defaultTypeWhenMissing
             }
           });
         }
@@ -316493,6 +316694,12 @@ ${formatRule(Codicon.menuSubmenu)}
         payload: hotspotContent
       });
     };
+    var updateHotspotPosition = function updateHotspotPosition(hotspotPosition) {
+      return dispatch({
+        type: hotspotActionTypes.hotspotPositionChange,
+        payload: hotspotPosition
+      });
+    };
 
     /** Updates the properties of the text hotspot, passes a payload like {color: 'blue'} */
     var updateTextHotspotStyle = function updateTextHotspotStyle(textHotspotStyle) {
@@ -316580,6 +316787,7 @@ ${formatRule(Codicon.menuSubmenu)}
       switchCurrentType: switchCurrentType,
       updateHotspotDataSource: updateHotspotDataSource,
       updateHotspotTooltip: updateHotspotTooltip,
+      updateHotspotPosition: updateHotspotPosition,
       updateTextHotspotStyle: updateTextHotspotStyle,
       updateTextHotspotContent: updateTextHotspotContent,
       updateDynamicHotspotSourceX: updateDynamicHotspotSourceX,
@@ -317119,6 +317327,7 @@ ${formatRule(Codicon.menuSubmenu)}
       switchCurrentType = _useHotspotEditorStat.switchCurrentType,
       updateHotspotDataSource = _useHotspotEditorStat.updateHotspotDataSource,
       updateHotspotTooltip = _useHotspotEditorStat.updateHotspotTooltip,
+      updateHotspotPosition = _useHotspotEditorStat.updateHotspotPosition,
       updateTextHotspotStyle = _useHotspotEditorStat.updateTextHotspotStyle,
       updateTextHotspotContent = _useHotspotEditorStat.updateTextHotspotContent,
       updateDynamicHotspotSourceX = _useHotspotEditorStat.updateDynamicHotspotSourceX,
@@ -317184,6 +317393,8 @@ ${formatRule(Codicon.menuSubmenu)}
       }
       var hotspotsWithoutExampleValues = filteredHotspots.map(function (hotspot) {
         return update(hotspot, {
+          $unset: ['id'],
+          // Remove the internal id added for drag tracking
           content: {
             $unset: ['values']
           }
@@ -317433,6 +317644,7 @@ ${formatRule(Codicon.menuSubmenu)}
           hotspotDefaults: hotspotDefaults
         });
       },
+      onUpdateHotspotPosition: updateHotspotPosition,
       onSelectHotspot: setSelectedHotspot,
       selectedHotspots: getSelectedHotspotsList(selectedHotspot, hotspots),
       src: cardConfig.content.src,