carbon-addons-iot-react 5.8.0 → 5.8.2

package/lib/scss/components/ValueCard/_attribute.scss

@@ -6,7 +6,7 @@
 .#{$iot-prefix}--value-card__attribute {
   display: flex;
   // need a set height to determine truncation vs wrapping. This is the max font size allowed
-  height: 54px;
+  height: 44px;
   // line up the value and unit
   align-items: baseline;
   padding-right: $spacing-05;

package/package.json

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

package/scss/components/ValueCard/_attribute.scss

@@ -6,7 +6,7 @@
 .#{$iot-prefix}--value-card__attribute {
   display: flex;
   // need a set height to determine truncation vs wrapping. This is the max font size allowed
-  height: 54px;
+  height: 44px;
   // line up the value and unit
   align-items: baseline;
   padding-right: $spacing-05;

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,