carbon-addons-iot-react 5.8.0 → 5.8.2

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/lib/css/carbon-addons-iot-react.css

@@ -40829,7 +40829,7 @@ html[dir=rtl] .iot--time-picker__wrapper .iot--time-picker__controls {
 
 .iot--value-card__attribute {
   display: flex;
-  height: 54px;
+  height: 44px;
   align-items: baseline;
   padding-right: 1rem;
 }