@gemx-dev/heatmap-react 3.5.56 → 3.5.58

package/dist/esm/index.js

@@ -41,6 +41,29 @@ const GraphView = ({ children, width, height }) => {
     return (jsxs(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, onNodesChange: onNodesChange, debug: true, minZoom: 0.5, maxZoom: 2, fitView: true, children: [jsx(Controls, {}), jsx(Background, {})] }));
 };
 
+/**
+ * Default backdrop configuration
+ */
+const BACKDROP_CONFIG = {
+    /**
+     * Default backdrop color
+     */
+    COLOR: '#000000',
+    /**
+     * Default backdrop opacity (0-1)
+     */
+    OPACITY: 0.5,
+    /**
+     * Default cutout expansion (pixels)
+     * Adds padding around the active element cutout
+     */
+    CUTOUT_EXPANSION: 2,
+    /**
+     * Z-index for backdrop canvas
+     */
+    Z_INDEX: 999,
+};
+
 // Portal mode: Full permissions for proper functionality
 // Need allow-forms for add to cart, allow-popups for some features
 const HEATMAP_IFRAME = {
@@ -1422,7 +1445,8 @@ const AREA_RENDERER_SELECTORS = {
 
 const CALLOUT_PADDING = 0;
 const CALLOUT_ARROW_SIZE = 8;
-const CALLOUT_HORIZONTAL_OFFSET = 0;
+const CALLOUT_OFFSET = { x: -8, y: 0 };
+const CALLOUT_ALIGNMENT = 'left';
 const CLICKED_ELEMENT_ID_BASE = 'gx-hm-clicked-element';
 const SECONDARY_CLICKED_ELEMENT_ID_BASE = 'gx-hm-secondary-clicked-element';
 const HOVERED_ELEMENT_ID_BASE = 'gx-hm-hovered-element';
@@ -2198,10 +2222,9 @@ function calculateRankPosition(rect, widthScale) {
     };
 }
 
-const getViewportDimensions = (containerElm, scale, scrollOffset) => {
+const getViewportDimensions = (containerElm, scale) => {
     if (containerElm) {
         const containerRect = containerElm.getBoundingClientRect();
-        // If scale provided, adjust dimensions
         const width = scale ? containerRect.width / scale : containerRect.width;
         const height = scale ? containerRect.height / scale : containerRect.height;
         return { width, height };
@@ -2211,48 +2234,12 @@ const getViewportDimensions = (containerElm, scale, scrollOffset) => {
         height: window.innerHeight,
     };
 };
-const getElementDimensions = (targetElm, calloutElm, scale, containerRect, mousePosition) => {
-    let targetRect;
-    if (mousePosition && containerRect && scale) {
-        // Create virtual target rect from mouse position
-        // Convert viewport coordinates to container-relative coordinates
-        const relativeX = (mousePosition.x - containerRect.left) / scale;
-        const relativeY = (mousePosition.y - containerRect.top) / scale;
-        // Create a small rect (1x1) at mouse position
-        targetRect = {
-            top: relativeY,
-            left: relativeX,
-            right: relativeX + 1,
-            bottom: relativeY + 1,
-            width: 1,
-            height: 1,
-            x: relativeX,
-            y: relativeY,
-            toJSON: () => ({}),
-        };
-    }
-    else if (mousePosition) {
-        // Fixed mode: use viewport coordinates directly
-        targetRect = {
-            top: mousePosition.y,
-            left: mousePosition.x,
-            right: mousePosition.x + 1,
-            bottom: mousePosition.y + 1,
-            width: 1,
-            height: 1,
-            x: mousePosition.x,
-            y: mousePosition.y,
-            toJSON: () => ({}),
-        };
-    }
-    else {
-        // No mouse position, use actual target element
-        targetRect = targetElm.getBoundingClientRect();
-    }
+const getElementDimensions = (options) => {
+    const { targetElm, calloutElm, scale, containerElm } = options;
+    const targetRect = targetElm.getBoundingClientRect();
     const calloutRect = calloutElm.getBoundingClientRect();
-    // If scale provided and no mousePosition, adjust dimensions for absolute positioning
-    if (scale && containerRect && !mousePosition) {
-        // Convert viewport coordinates to container-relative coordinates, then scale
+    const containerRect = containerElm.getBoundingClientRect();
+    if (scale && containerRect) {
         const relativeTop = (targetRect.top - containerRect.top) / scale;
         const relativeLeft = (targetRect.left - containerRect.left) / scale;
         const scaledWidth = targetRect.width / scale;
@@ -2274,7 +2261,6 @@ const getElementDimensions = (targetElm, calloutElm, scale, containerRect, mouse
             },
         };
     }
-    // Return with scaled callout rect if scale provided
     if (scale) {
         return {
             targetRect,
@@ -2298,23 +2284,42 @@ const getAlignmentOrder = (alignment) => {
             return ['right', 'center', 'left'];
     }
 };
-const calculateLeftPosition = ({ targetRect, calloutRect, hozOffset, align, }) => {
+const calculateLeftPosition = (align, options) => {
+    const { rectDimensions, offset } = options;
+    const { targetRect, calloutRect } = rectDimensions;
+    const { x: hozOffset } = offset;
+    const relLeft = targetRect.left;
+    const relRight = targetRect.right;
+    const relWidth = targetRect.width;
+    const calloutWidth = calloutRect.width;
+    let left;
     switch (align) {
         case 'left':
-            return targetRect.left + hozOffset;
+            left = relLeft + hozOffset;
+            break;
         case 'right':
-            return targetRect.right - calloutRect.width - hozOffset;
+            left = relRight - calloutWidth - hozOffset;
+            break;
         case 'center':
         default:
-            return targetRect.left + targetRect.width / 2 - calloutRect.width / 2;
+            left = relLeft + relWidth / 2 - calloutWidth / 2;
+            break;
     }
+    // No clamping - let validation determine if position is valid
+    // If position would overflow, valid = false and system chooses different placement
+    return left;
 };
-const calculateVerticalPosition = (targetRect, calloutRect, placement, padding, arrowSize, offsetY = 0) => {
+const calculateVerticalPosition = (placement, options) => {
+    const { rectDimensions, padding, arrowSize, offset } = options;
+    const { targetRect, calloutRect } = rectDimensions;
+    const { y: offsetY } = offset;
     return placement === 'top'
         ? targetRect.top - calloutRect.height - padding - arrowSize + offsetY
         : targetRect.bottom + padding + arrowSize + offsetY;
 };
-const calculateHorizontalPlacementPosition = (targetRect, calloutRect, placement, padding, arrowSize) => {
+const calculateHorizontalPosition = (placement, options) => {
+    const { rectDimensions, padding, arrowSize } = options;
+    const { targetRect, calloutRect } = rectDimensions;
     const top = targetRect.top + targetRect.height / 2 - calloutRect.height / 2;
     const left = placement === 'right'
         ? targetRect.right + padding + arrowSize
@@ -2322,98 +2327,115 @@ const calculateHorizontalPlacementPosition = (targetRect, calloutRect, placement
     return { top, left };
 };
 
-const isLeftPositionValid = (leftPos, calloutWidth, viewportWidth, padding, containerRect) => {
-    if (containerRect) {
-        return leftPos >= containerRect.left + padding && leftPos + calloutWidth <= containerRect.right - padding;
-    }
-    return leftPos >= padding && leftPos + calloutWidth <= viewportWidth - padding;
+const EPSILON = 0.1; // Tolerance for floating point errors
+const isLeftPositionValid = (leftPos, options) => {
+    const { rectDimensions, viewport, padding, offset } = options;
+    const { width: calloutWidth } = rectDimensions.calloutRect;
+    const { width: viewportWidth } = viewport;
+    const absLeft = rectDimensions.targetAbsoluteRect?.left ?? 0;
+    const relLeftPos = absLeft + leftPos - offset.x;
+    const maxViewportWidth = viewportWidth - padding + EPSILON;
+    const isValidLeft = relLeftPos >= padding - EPSILON;
+    const isRectCalloutShowValid = relLeftPos + calloutWidth <= maxViewportWidth;
+    return isValidLeft && isRectCalloutShowValid;
 };
-const isVerticalPositionValid = (targetRect, calloutRect, placement, viewportHeight, padding, arrowSize, containerRect) => {
-    if (containerRect) {
-        return placement === 'top'
-            ? targetRect.top - calloutRect.height - padding - arrowSize >= containerRect.top
-            : targetRect.bottom + calloutRect.height + padding + arrowSize <= containerRect.bottom;
-    }
+const isRightPositionValid = (leftPos, options) => {
+    const { rectDimensions, viewport, padding } = options;
+    const { width: calloutWidth } = rectDimensions.calloutRect;
+    const { width: viewportWidth } = viewport;
+    const maxViewportWidth = viewportWidth - padding + EPSILON;
+    const isValidRight = leftPos - calloutWidth - padding - EPSILON <= maxViewportWidth;
+    return isValidRight;
+};
+const isVerticalPositionValid = (placement, options) => {
+    const { rectDimensions, viewport, padding, arrowSize } = options;
+    const { targetRect, calloutRect } = rectDimensions;
+    const { height: viewportHeight } = viewport;
+    const { height: calloutHeight } = calloutRect;
     return placement === 'top'
-        ? targetRect.top - calloutRect.height - padding - arrowSize > 0
-        : targetRect.bottom + calloutRect.height + padding + arrowSize < viewportHeight;
+        ? targetRect.top - calloutHeight - padding - arrowSize > -EPSILON
+        : targetRect.bottom + calloutHeight + padding + arrowSize < viewportHeight + EPSILON;
 };
-const isHorizontalPlacementValid = (targetRect, calloutRect, placement, viewportWidth, padding, arrowSize, containerRect) => {
-    if (containerRect) {
-        return placement === 'right'
-            ? targetRect.right + calloutRect.width + padding + arrowSize <= containerRect.right
-            : targetRect.left - calloutRect.width - padding - arrowSize >= containerRect.left;
-    }
+const isHorizontalPositionValid = (placement, options) => {
+    const { rectDimensions, viewport, padding, arrowSize } = options;
+    const { targetRect, calloutRect } = rectDimensions;
+    const { width: viewportWidth } = viewport;
+    const { width: calloutWidth } = calloutRect;
     return placement === 'right'
-        ? targetRect.right + calloutRect.width + padding + arrowSize < viewportWidth
-        : targetRect.left - calloutRect.width - padding - arrowSize > 0;
+        ? targetRect.right + calloutWidth + padding + arrowSize < viewportWidth + EPSILON
+        : targetRect.left - calloutWidth - padding - arrowSize > -EPSILON;
 };
 
-const generateVerticalPositionCandidates = (targetRect, calloutRect, viewportHeight, viewportWidth, alignment, offset, padding, arrowSize, containerRect) => {
+const generateVerticalPositionCandidates = (options) => {
+    const { alignment } = options;
     const candidates = [];
     const placements = ['top', 'bottom'];
     placements.forEach((placement) => {
-        const verticalPos = calculateVerticalPosition(targetRect, calloutRect, placement, padding, arrowSize, offset.y);
-        const verticalValid = isVerticalPositionValid(targetRect, calloutRect, placement, viewportHeight, padding, arrowSize, containerRect);
+        const verticalPos = calculateVerticalPosition(placement, options);
+        const verticalValid = isVerticalPositionValid(placement, options);
         const alignmentOrder = getAlignmentOrder(alignment);
         alignmentOrder.forEach((align) => {
-            const horizontalPos = calculateLeftPosition({
-                targetRect,
-                calloutRect,
-                hozOffset: offset.x,
-                align,
-            });
-            candidates.push({
-                placement,
-                top: verticalPos,
-                left: horizontalPos,
-                horizontalAlign: align,
-                valid: verticalValid && isLeftPositionValid(horizontalPos, calloutRect.width, viewportWidth, padding, containerRect),
-            });
+            const leftPos = calculateLeftPosition(align, options);
+            const isValidLeft = isLeftPositionValid(leftPos, options);
+            const isValidRight = isRightPositionValid(leftPos, options);
+            const candidate = { placement, top: verticalPos, left: leftPos, horizontalAlign: align, valid: false };
+            switch (align) {
+                case 'left':
+                    candidate.valid = verticalValid && isValidLeft;
+                    break;
+                case 'right':
+                    candidate.valid = verticalValid && isValidRight;
+                    break;
+            }
+            candidates.push(candidate);
         });
     });
     return candidates;
 };
-const generateHorizontalPositionCandidates = (targetRect, calloutRect, viewportWidth, padding, arrowSize, containerRect) => {
+const generateHorizontalPositionCandidates = (options) => {
     const placements = ['left', 'right'];
     return placements.map((placement) => {
-        const { top, left } = calculateHorizontalPlacementPosition(targetRect, calloutRect, placement, padding, arrowSize);
-        return {
-            placement,
-            top,
-            left,
-            horizontalAlign: 'center',
-            valid: isHorizontalPlacementValid(targetRect, calloutRect, placement, viewportWidth, padding, arrowSize, containerRect),
-        };
+        const { top, left } = calculateHorizontalPosition(placement, options);
+        const isValidHorizontal = isHorizontalPositionValid(placement, options);
+        const candidate = { placement, top, left, horizontalAlign: 'center', valid: false };
+        candidate.valid = isValidHorizontal;
+        return candidate;
     });
 };
-const generateAllPositionCandidates = (rectDimensions, viewport, alignment, offset, padding, arrowSize, containerRect) => {
-    const { targetRect, calloutRect } = rectDimensions;
-    const verticalCandidates = generateVerticalPositionCandidates(targetRect, calloutRect, viewport.height, viewport.width, alignment, offset, padding, arrowSize, containerRect);
-    const horizontalCandidates = generateHorizontalPositionCandidates(targetRect, calloutRect, viewport.width, padding, arrowSize, containerRect);
+const generateAllCandidates = (options) => {
+    const verticalCandidates = generateVerticalPositionCandidates(options);
+    const horizontalCandidates = generateHorizontalPositionCandidates(options);
     return [...verticalCandidates, ...horizontalCandidates];
 };
 
 const selectBestPosition = (candidates) => {
     return candidates.find((p) => p.valid) || candidates[0];
 };
-const constrainToViewport = (position, calloutRect, viewport, padding, containerRect) => {
+const constrainToViewport = (candidate, options) => {
+    const { containerRect, padding, rectDimensions, viewport } = options;
+    const { calloutRect } = rectDimensions;
+    const { left: leftPos, top: topPos } = candidate;
     if (containerRect) {
-        const left = Math.max(containerRect.left + padding, Math.min(position.left, containerRect.right - calloutRect.width - padding));
-        const top = Math.max(containerRect.top + padding, Math.min(position.top, containerRect.bottom - calloutRect.height - padding));
+        const containerTop = containerRect.top + padding;
+        const containerLeft = containerRect.left + padding;
+        const containerRight = containerRect.right - calloutRect.width - padding;
+        const containerBottom = containerRect.bottom - calloutRect.height - padding;
+        const left = Math.max(containerLeft, Math.min(leftPos, containerRight));
+        const top = Math.max(containerTop, Math.min(topPos, containerBottom));
         return { top, left };
     }
-    const left = Math.max(padding, Math.min(position.left, viewport.width - calloutRect.width - padding));
-    const top = Math.max(padding, Math.min(position.top, viewport.height - calloutRect.height - padding));
+    const viewportLeft = padding;
+    const viewportTop = padding;
+    const viewportRight = viewport.width - calloutRect.width - padding;
+    const viewportBottom = viewport.height - calloutRect.height - padding;
+    const left = Math.max(viewportLeft, Math.min(leftPos, viewportRight));
+    const top = Math.max(viewportTop, Math.min(topPos, viewportBottom));
     return { top, left };
 };
 
-/**
- * Get scroll offset from visualRef for absolute positioning
- */
-const getScrollOffset = (isAbsolute, visualRef) => {
-    if (!isAbsolute || !visualRef?.current)
-        return undefined;
+const getScrollOffset = (visualRef) => {
+    if (!visualRef?.current)
+        return;
     return {
         top: visualRef.current.scrollTop,
         left: visualRef.current.scrollLeft,
@@ -2424,17 +2446,19 @@ const getScrollOffset = (isAbsolute, visualRef) => {
  * - With scroll: represents visible area in container coordinates
  * - Without scroll: represents full container in container coordinates
  */
-const createAdjustedContainerRect = (rawContainerRect, scale, scrollOffset) => {
+const createAdjustedContainerRect = (options) => {
+    const { containerElm, scale, isAbsolute, visualRef } = options;
+    const containerRect = containerElm.getBoundingClientRect();
+    const scrollOffset = getScrollOffset(visualRef);
     // No scale = fixed positioning, use raw rect
-    if (!scale) {
-        return rawContainerRect;
-    }
-    const scaledWidth = rawContainerRect.width / scale;
-    const scaledHeight = rawContainerRect.height / scale;
+    if (!scale)
+        return containerRect;
+    const scaledWidth = containerRect.width / scale;
+    const scaledHeight = containerRect.height / scale;
     // Absolute positioning with scroll offset
-    if (scrollOffset) {
+    if (isAbsolute && scrollOffset) {
         return {
-            ...rawContainerRect,
+            ...containerRect,
             top: scrollOffset.top,
             left: scrollOffset.left,
             right: scrollOffset.left + scaledWidth,
@@ -2445,17 +2469,21 @@ const createAdjustedContainerRect = (rawContainerRect, scale, scrollOffset) => {
     }
     // Absolute positioning without scroll
     return {
-        ...rawContainerRect,
+        ...containerRect,
         top: 0,
         left: 0,
         right: scaledWidth,
-        bottom: scaledHeight,
         width: scaledWidth,
+        bottom: scaledHeight,
         height: scaledHeight,
     };
 };
 const calcCalloutPosition = (options) => {
-    const { targetElm, calloutElm, setPosition, offset = { x: CALLOUT_HORIZONTAL_OFFSET, y: 0 }, alignment = 'center', positionMode, widthScale, visualRef, mousePosition, } = options;
+    const { targetElm, calloutElm, setPosition, positionMode, widthScale, visualRef } = options;
+    const offset = options.offset ?? CALLOUT_OFFSET;
+    const alignment = options.alignment ?? CALLOUT_ALIGNMENT;
+    const padding = CALLOUT_PADDING;
+    const arrowSize = CALLOUT_ARROW_SIZE;
     return () => {
         const isAbsolute = positionMode === 'absolute';
         const scale = isAbsolute ? widthScale : 1;
@@ -2465,35 +2493,94 @@ const calcCalloutPosition = (options) => {
         const containerElm = isAbsolute ? calloutElm.parentElement : visualRef?.current;
         if (!containerElm)
             return;
-        const rawContainerRect = containerElm.getBoundingClientRect();
-        const scrollOffset = getScrollOffset(isAbsolute, visualRef);
-        // Step 1: Get element dimensions
-        // For mousePosition: creates virtual 1x1 rect at mouse coordinates
-        // For targetElm: uses actual element rect
-        const rectDimensions = getElementDimensions(targetElm, calloutElm, scale, rawContainerRect, mousePosition);
-        // Step 2: Get viewport dimensions
         const viewport = getViewportDimensions(visualRef?.current, scale);
-        // Step 3: Adjust container rect for absolute positioning
-        // This rect represents the valid bounds for positioning
-        const adjustedContainerRect = createAdjustedContainerRect(rawContainerRect, scale, scrollOffset);
-        const padding = CALLOUT_PADDING;
-        const arrowSize = CALLOUT_ARROW_SIZE;
-        // Step 4: Generate all position candidates
-        const candidates = generateAllPositionCandidates(rectDimensions, viewport, alignment, offset, padding, arrowSize, adjustedContainerRect);
-        // Step 5: Select best valid position
-        const bestPosition = selectBestPosition(candidates);
-        // Step 6: Constrain to viewport/container bounds
-        const constrainedPosition = constrainToViewport({ top: bestPosition.top, left: bestPosition.left }, rectDimensions.calloutRect, viewport, padding, adjustedContainerRect);
-        // Step 7: Set final position
+        const rectDimensions = getElementDimensions({ targetElm, calloutElm, scale, containerElm });
+        const containerRect = createAdjustedContainerRect({ containerElm, scale, isAbsolute, visualRef });
+        const options = {
+            rectDimensions,
+            viewport,
+            alignment,
+            offset,
+            padding,
+            arrowSize,
+            containerRect,
+        };
+        const candidates = generateAllCandidates(options);
+        const candidate = selectBestPosition(candidates);
+        // Constrain to viewport/container bounds
+        const constrainedCandidate = constrainToViewport(candidate, options);
+        // Final callout position
         const finalPosition = {
-            top: constrainedPosition.top,
-            left: constrainedPosition.left,
-            placement: bestPosition.placement,
-            horizontalAlign: bestPosition.horizontalAlign,
+            top: constrainedCandidate.top,
+            left: constrainedCandidate.left,
+            placement: candidate.placement,
+            horizontalAlign: candidate.horizontalAlign,
         };
         setPosition(finalPosition);
     };
 };
+const calcCalloutPositionAbsolute = (props) => {
+    const { widthScale, calloutElm, containerElm, element, onChange } = props;
+    const mousePosition = element?.mousePosition;
+    if (!mousePosition)
+        return;
+    const padding = props.padding ?? CALLOUT_PADDING;
+    const arrowSize = props.arrowSize ?? CALLOUT_ARROW_SIZE;
+    const rawCalloutRect = calloutElm.getBoundingClientRect();
+    if (rawCalloutRect.width === 0 || rawCalloutRect.height === 0)
+        return;
+    const calloutRect = {
+        ...rawCalloutRect,
+        width: rawCalloutRect.width / widthScale,
+        height: rawCalloutRect.height / widthScale,
+    };
+    const containerRect = containerElm.getBoundingClientRect();
+    const containerWidth = containerRect.width / widthScale;
+    const containerHeight = containerRect.height / widthScale;
+    const mouseX = mousePosition.x;
+    const mouseY = mousePosition.y;
+    const targetRect = {
+        top: mouseY,
+        left: mouseX,
+        right: mouseX + 1,
+        bottom: mouseY + 1,
+        width: 1,
+        height: 1,
+        x: mouseX,
+        y: mouseY,
+        toJSON: () => ({}),
+    };
+    const rectDimensions = {
+        targetRect,
+        calloutRect,
+        targetAbsoluteRect: {
+            top: element.top,
+            left: element.left,
+        },
+    };
+    const viewport = {
+        width: containerWidth,
+        height: containerHeight,
+    };
+    const options = {
+        rectDimensions,
+        viewport,
+        alignment: CALLOUT_ALIGNMENT,
+        offset: CALLOUT_OFFSET,
+        padding,
+        arrowSize,
+        containerRect,
+    };
+    const candidates = generateAllCandidates(options);
+    const bestPosition = selectBestPosition(candidates);
+    const style = {
+        position: 'absolute',
+        top: bestPosition.top,
+        left: bestPosition.left,
+        zIndex: 1000,
+    };
+    onChange(style);
+};
 
 /**
  * Throttle a function using requestAnimationFrame
@@ -3639,6 +3726,59 @@ class IframeHeightProcessor {
     }
 }
 
+/**
+ * Draw a backdrop overlay on canvas with a cutout for the active element
+ * This creates a "spotlight" effect highlighting the active element
+ */
+const drawBackdropWithCutout = (options) => {
+    const { canvas, activeRect, backdropColor = '#000000', backdropOpacity = 0.5, cutoutExpansion = 0 } = options;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    const { width: canvasWidth, height: canvasHeight } = canvas;
+    // Apply expansion to the cutout rect
+    const top = Math.max(0, activeRect.top - cutoutExpansion);
+    const left = Math.max(0, activeRect.left - cutoutExpansion);
+    const width = Math.min(canvasWidth - left, activeRect.width + cutoutExpansion * 2);
+    const height = Math.min(canvasHeight - top, activeRect.height + cutoutExpansion * 2);
+    // Clear previous drawing
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    // Set backdrop style
+    ctx.fillStyle = backdropColor;
+    ctx.globalAlpha = backdropOpacity;
+    // Draw backdrop in 4 rectangles around the active element
+    // This creates a cutout effect
+    // Top rectangle (above active element)
+    if (top > 0) {
+        ctx.fillRect(0, 0, canvasWidth, top);
+    }
+    // Bottom rectangle (below active element)
+    const bottomY = top + height;
+    if (bottomY < canvasHeight) {
+        ctx.fillRect(0, bottomY, canvasWidth, canvasHeight - bottomY);
+    }
+    // Left rectangle (left of active element)
+    if (left > 0) {
+        ctx.fillRect(0, top, left, height);
+    }
+    // Right rectangle (right of active element)
+    const rightX = left + width;
+    if (rightX < canvasWidth) {
+        ctx.fillRect(rightX, top, canvasWidth - rightX, height);
+    }
+    // Reset alpha
+    ctx.globalAlpha = 1.0;
+};
+/**
+ * Clear the entire canvas
+ */
+const clearCanvas = (canvas) => {
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+};
+
 function validateAreaCreation(dataInfo, hash, areas) {
     if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks) {
         logger$4.warn('Cannot create area: missing heatmap data');
@@ -4451,8 +4591,9 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
             reset();
             return;
         }
-        setHoveredElement({ ...elementInfo, mousePosition: { x: event.clientX, y: event.clientY } });
-    }, [dataInfo, getRect, reset, getHashFromEvent, setHoveredElement]);
+        const mousePosition = getElementMousePosition(event, widthScale);
+        setHoveredElement({ ...elementInfo, mousePosition });
+    }, [dataInfo, getRect, reset, widthScale, getHashFromEvent, setHoveredElement]);
     const handleMouseMove = useMemo(() => throttleRAF(onHandleMouseMove), [onHandleMouseMove]);
     const handleClick = useCallback((event, hash) => {
         if (!hash)
@@ -4461,12 +4602,12 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
             setSelectedElement({ hash });
             return;
         }
-        const mousePosition = { x: event.clientX, y: event.clientY };
+        const mousePosition = getElementMousePosition(event, widthScale);
         setSelectedElement({
             hash,
             mousePosition,
         });
-    }, [setSelectedElement]);
+    }, [setSelectedElement, widthScale]);
     // Cleanup throttled function on unmount
     useEffect(() => {
         return () => {
@@ -4479,6 +4620,15 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         handleClick,
     };
 };
+const getElementMousePosition = (event, widthScale) => {
+    const containerElm = event.target;
+    if (!containerElm)
+        return;
+    const containerRect = containerElm.getBoundingClientRect();
+    const elementRelativeX = (event.clientX - containerRect.left) / widthScale;
+    const elementRelativeY = (event.clientY - containerRect.top) / widthScale;
+    return { x: elementRelativeX, y: elementRelativeY };
+};
 const convertViewportToIframeCoords = (clientX, clientY, iframeRect, scale) => {
     let x = clientX - iframeRect.left;
     let y = clientY - iframeRect.top;
@@ -6416,6 +6566,8 @@ const useObserveIframeHeight = (props) => {
     return {};
 };
 
+// Max zoom ratio constant: 100% = fit to width
+const MAX_ZOOM_RATIO = 100;
 const useScaleCalculation = (props) => {
     const widthScale = useHeatmapViz((s) => s.widthScale);
     const zoomRatio = useHeatmapViz((s) => s.zoomRatio);
@@ -6427,23 +6579,31 @@ const useScaleCalculation = (props) => {
     const { containerWidth, containerHeight, contentWidth, contentHeight } = props;
     const calculateScaleResult = useCallback(() => {
         if (containerWidth > 0 && contentWidth > 0 && containerHeight > 0 && contentHeight > 0) {
-            // 1. Calculate widthScale (base scale from width)
+            // 1. Calculate available dimensions
             const availableWidth = containerWidth - HEATMAP_CONFIG['padding'] * 2;
-            const widthScale = Math.min(availableWidth / contentWidth, 1);
-            // 2. Calculate available height
             const toolbarHeight = HEATMAP_CONFIG['heightToolbar'] || 0;
             const paddingTotal = HEATMAP_CONFIG['padding'] * 2;
-            const availableHeight = containerHeight - toolbarHeight - paddingTotal; // 10px buffer to avoid scroll bar
-            // 3. Calculate minZoomRatio (zoom ratio minimum to fit iframe in container)
-            const roundedMinZoomRatio = (availableHeight / (contentHeight * widthScale)) * 100;
-            // Limit minZoomRatio to a reasonable range (10-100)
-            const finalMinZoomRatio = Math.max(10, Math.min(roundedMinZoomRatio, 100));
-            // 4. Apply zoom ratio (cannot be less than minZoomRatio)
-            const clampedZoomRatio = Math.max(zoomRatio, finalMinZoomRatio);
+            const availableHeight = containerHeight - toolbarHeight - paddingTotal;
+            // 2. Calculate widthScale (base scale to fit content width into container width)
+            // This represents 100% zoom (fit to width)
+            const widthScale = Math.min(availableWidth / contentWidth, 1);
+            // 3. Calculate minZoomRatio (zoom ratio to fit height)
+            // At minZoomRatio, the content should fit entirely within the container height
+            // Formula: contentHeight * widthScale * (minZoomRatio / 100) = availableHeight
+            // => minZoomRatio = (availableHeight / (contentHeight * widthScale)) * 100
+            const calculatedMinZoomRatio = (availableHeight / (contentHeight * widthScale)) * 100;
+            // Limit minZoomRatio: cannot exceed MAX_ZOOM_RATIO (100%)
+            // and should have a reasonable minimum (e.g., 1%)
+            const finalMinZoomRatio = Math.max(1, Math.min(calculatedMinZoomRatio, MAX_ZOOM_RATIO));
+            // 4. Apply zoom ratio (clamp between min and max)
+            const clampedZoomRatio = Math.max(finalMinZoomRatio, Math.min(zoomRatio, MAX_ZOOM_RATIO));
             const zoomMultiplier = clampedZoomRatio / 100;
             // 5. Calculate finalScale
+            // finalScale = widthScale * zoomMultiplier
+            // At 100% zoom: finalScale = widthScale (content fits container width)
+            // At minZoomRatio: finalScale fits content entirely in container
             const finalScale = widthScale * zoomMultiplier;
-            // 6. Check if it is currently fitted
+            // 6. Check if it is currently fitted (at minimum zoom)
             const isCurrentlyFitted = zoomRatio <= finalMinZoomRatio;
             // 7. Update store
             setScale(finalScale);
@@ -7582,7 +7742,11 @@ const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, e
 };
 VizAreaClick.displayName = 'VizAreaClick';
 
-const RankBadgeComponent = ({ index, elementRect, widthScale, clickOnElement }) => {
+const RankBadgeComponent = ({ index, hash, elementRect, widthScale, show = true, clickOnElement, }) => {
+    const clickedHash = useHeatmapClick((s) => s.selectedElement?.hash);
+    const isShow = !!show && clickedHash !== hash;
+    if (!isShow)
+        return null;
     const style = calculateRankPosition(elementRect, widthScale);
     return (jsx("div", { className: "gx-hm-rank-badge", style: style, onClick: clickOnElement, children: index }));
 };
@@ -7600,7 +7764,7 @@ const DefaultRankBadgesComponent = ({ getRect, hidden }) => {
             const rect = getRect(element);
             if (!rect)
                 return null;
-            return jsx(RankBadge, { index: index + 1, elementRect: rect, widthScale: widthScale }, element.hash);
+            return (jsx(RankBadge, { hash: element.hash, index: index + 1, elementRect: rect, widthScale: widthScale }, element.hash));
         }) }));
 };
 DefaultRankBadgesComponent.displayName = 'DefaultRankBadges';
@@ -7612,10 +7776,40 @@ const DEFAULT_POSITION = {
     placement: 'top',
     horizontalAlign: 'center',
 };
-const DEFAULT_MOUSE_OFFSET = { x: -8, y: 12 };
+const ElementCallout = (props) => {
+    const viewId = useViewIdContext();
+    const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
+    const calloutRef = useRef(null);
+    const element = props.element;
+    const positionMode = props.positionMode ?? DEFAULT_POSITION_MODE;
+    const isAbsolute = positionMode === 'absolute';
+    const position = useAnchorPosition(calloutRef, props);
+    const className = `clarity-callout clarity-callout--${position.placement} clarity-callout--align-${position.horizontalAlign}`;
+    const portalContainerId = getPortalElmId();
+    if (!portalContainerId)
+        return null;
+    const calloutContent = (jsx("div", { ref: calloutRef, className: className, style: {
+            position: positionMode,
+            top: position.top,
+            left: position.left,
+            zIndex: Z_INDEX.CALLOUT,
+        }, "aria-live": "assertive", role: "tooltip", children: CompElementCallout && jsx(CompElementCallout, { elementHash: element.hash }) }));
+    if (!document.getElementById(portalContainerId))
+        return null;
+    return createPortal(calloutContent, document.getElementById(portalContainerId));
+    function getPortalElmId() {
+        const containerElmId = `gx-hm-elements-${viewId}`;
+        const vizContainerElmId = `gx-hm-viz-container-${viewId}`;
+        if (!isAbsolute)
+            return vizContainerElmId;
+        if (!element.mousePosition)
+            return containerElmId;
+        return '';
+    }
+};
 const useAnchorPosition = (calloutRef, props) => {
     const widthScale = useHeatmapViz((s) => s.widthScale);
-    const { target, visualRef, offset = DEFAULT_MOUSE_OFFSET, alignment, element, positionMode } = props;
+    const { target, visualRef, alignment, element, positionMode } = props;
     const [position, setPosition] = useState(DEFAULT_POSITION);
     const isAbsolute = positionMode === 'absolute';
     const mousePosition = element.mousePosition;
@@ -7630,15 +7824,11 @@ const useAnchorPosition = (calloutRef, props) => {
             targetElm,
             calloutElm,
             setPosition,
-            offset,
             alignment,
             positionMode,
             visualRef,
             widthScale,
-            mousePosition,
         });
-        // Delay initial calculation to allow scroll animations to complete
-        // Use multiple frames to ensure layout is stable
         const rafId1 = requestAnimationFrame(() => {
             requestAnimationFrame(() => {
                 positionFn();
@@ -7647,13 +7837,9 @@ const useAnchorPosition = (calloutRef, props) => {
         const handleUpdate = () => {
             requestAnimationFrame(positionFn);
         };
-        // Listen to events based on positioning mode
-        // Absolute mode: position is in container coordinates, doesn't change with scroll
-        // Fixed mode: position is in viewport coordinates, needs scroll updates
         const visualContainer = visualRef?.current;
         window.addEventListener('resize', handleUpdate);
         if (!isAbsolute) {
-            // Fixed mode: listen to scroll events for viewport position updates
             window.addEventListener('scroll', handleUpdate, true);
             visualContainer?.addEventListener('scroll', handleUpdate);
         }
@@ -7665,81 +7851,190 @@ const useAnchorPosition = (calloutRef, props) => {
                 visualContainer?.removeEventListener('scroll', handleUpdate);
             }
         };
-    }, [element, target, visualRef, offset, alignment, isAbsolute, widthScale, calloutRef, mousePosition, positionMode]);
+    }, [element, target, visualRef, alignment, isAbsolute, widthScale, calloutRef, mousePosition, positionMode]);
     return position;
 };
-const ElementCallout = (props) => {
-    const viewId = useViewIdContext();
-    const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
-    const calloutRef = useRef(null);
-    const element = props.element;
-    const positionMode = props.positionMode ?? DEFAULT_POSITION_MODE;
-    const isAbsolute = positionMode === 'absolute';
-    const position = useAnchorPosition(calloutRef, props);
-    const className = `clarity-callout clarity-callout--${position.placement} clarity-callout--align-${position.horizontalAlign}`;
-    // Determine portal container based on position mode
-    const containerElmId = `gx-hm-elements-${viewId}`;
-    const vizContainerElmId = `gx-hm-viz-container-${viewId}`;
-    const portalContainerId = isAbsolute ? containerElmId : vizContainerElmId;
-    const calloutContent = (jsx("div", { ref: calloutRef, className: className, style: {
-            position: positionMode,
-            top: position.top,
-            left: position.left,
-            zIndex: Z_INDEX.CALLOUT,
-        }, "aria-live": "assertive", role: "tooltip", children: CompElementCallout && jsx(CompElementCallout, { elementHash: element.hash }) }));
-    return createPortal(calloutContent, document.getElementById(portalContainerId));
-};
 
-const ElementMissing = ({ show = true }) => {
+const ElementMissing = ({ show = true, visualRef }) => {
     const widthScale = useHeatmapViz((s) => s.widthScale);
+    const missingElementRef = useRef(null);
+    const wrapperWidth = useHeatmapConfigStore((s) => s.width);
+    const [scrollPosition, setScrollPosition] = useState({ scrollTop: 0, scrollLeft: 0 });
+    useEffect(() => {
+        const container = visualRef.current;
+        if (!container)
+            return;
+        const updateScrollPosition = () => {
+            setScrollPosition({
+                scrollTop: container.scrollTop,
+                scrollLeft: container.scrollLeft,
+            });
+        };
+        // Initial position
+        updateScrollPosition();
+        // Listen to scroll events
+        container.addEventListener('scroll', updateScrollPosition);
+        return () => {
+            container.removeEventListener('scroll', updateScrollPosition);
+        };
+    }, [visualRef]);
     if (!show)
         return null;
-    return (jsx("div", { className: "missingElement", style: {
-            position: 'fixed',
-            top: '50%',
-            left: '50%',
-            transform: `translate(-50%, -50%) scale(${1 / widthScale})`,
-            background: 'rgba(0, 0, 0, 0.8)',
-            color: 'white',
-            padding: '12px 20px',
-            borderRadius: '8px',
-            fontSize: '14px',
-            fontWeight: '500',
-            zIndex: 9999,
-            pointerEvents: 'none',
-            whiteSpace: 'nowrap',
-        }, "aria-live": "assertive", children: "Element not visible on current screen" }));
+    const container = visualRef.current;
+    const containerRect = container?.getBoundingClientRect();
+    const elementRect = missingElementRef.current?.getBoundingClientRect();
+    const elementHeightCenter = elementRect?.height ?? 0;
+    const scrollTop = scrollPosition.scrollTop ?? 0;
+    const containerHeight = containerRect?.height ?? 0;
+    const topPosition = scrollTop + (containerHeight + elementHeightCenter) / 2;
+    const topPositionScaled = topPosition / widthScale;
+    const leftPosition = wrapperWidth / 2;
+    return (jsxs(Fragment, { children: [jsx("div", { className: "missingElement-backdrop", style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    background: 'rgba(0, 0, 0, 0.5)',
+                    zIndex: 9998,
+                    pointerEvents: 'none',
+                } }), jsx("div", { ref: missingElementRef, className: "missingElement", style: {
+                    position: 'absolute',
+                    top: topPositionScaled,
+                    left: leftPosition,
+                    transform: `translate(-50%, -50%) scale(${1 / widthScale})`,
+                    background: 'rgba(0, 0, 0, 0.8)',
+                    color: 'white',
+                    padding: '12px 20px',
+                    borderRadius: '8px',
+                    fontSize: '14px',
+                    fontWeight: '500',
+                    zIndex: 9999,
+                    pointerEvents: 'none',
+                    whiteSpace: 'nowrap',
+                }, "aria-live": "assertive", children: "Element not visible on current screen" })] }));
 };
 
-const ElementOverlayComponent = ({ type, element, onClick, elementId }) => {
+/**
+ * Example component showing how to use canvas backdrop
+ * Renders a dark overlay with cutout for active element
+ */
+const BackdropCanvas = ({ activeElement, viewportWidth, viewportHeight, borderWidth = 0, show = true, cutoutExpansion = BACKDROP_CONFIG.CUTOUT_EXPANSION, backdropColor = BACKDROP_CONFIG.COLOR, backdropOpacity = BACKDROP_CONFIG.OPACITY, }) => {
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas || !show)
+            return;
+        // Set canvas dimensions
+        canvas.width = viewportWidth;
+        canvas.height = viewportHeight;
+        if (!activeElement || (activeElement.width === 0 && activeElement.height === 0)) {
+            // No active element - clear canvas
+            clearCanvas(canvas);
+            return;
+        }
+        // Draw backdrop with cutout for active element
+        drawBackdropWithCutout({
+            canvas,
+            activeRect: {
+                top: activeElement.top + borderWidth,
+                left: activeElement.left + borderWidth,
+                width: activeElement.width,
+                height: activeElement.height,
+            },
+            backdropColor,
+            backdropOpacity,
+            cutoutExpansion,
+        });
+    }, [
+        activeElement,
+        viewportWidth,
+        viewportHeight,
+        borderWidth,
+        show,
+        cutoutExpansion,
+        backdropColor,
+        backdropOpacity,
+    ]);
+    if (!show)
+        return null;
+    return (jsx("canvas", { ref: canvasRef, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: viewportWidth,
+            height: viewportHeight,
+            pointerEvents: 'none', // Allow clicks to pass through
+            zIndex: BACKDROP_CONFIG.Z_INDEX, // Below callout but above content
+        } }));
+};
+
+const ElementCalloutOverlay = (props) => {
+    const { element, containerRef } = props;
+    const widthScale = useHeatmapViz((s) => s.widthScale);
+    const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
+    const calloutRef = useRef(null);
+    const [calloutStyle, setCalloutStyle] = useState(undefined);
+    useEffect(() => {
+        const calloutElm = calloutRef.current;
+        const containerElm = containerRef?.current;
+        if (!element || !calloutElm || !containerElm)
+            return;
+        calcCalloutPositionAbsolute({
+            widthScale,
+            calloutElm,
+            containerElm,
+            element,
+            onChange: setCalloutStyle,
+        });
+    }, [element, widthScale, containerRef]);
+    if (!element)
+        return null;
+    return (jsx("div", { ref: calloutRef, style: calloutStyle, className: "clarity-callout", children: CompElementCallout && jsx(CompElementCallout, { elementHash: element.hash }) }));
+};
+ElementCalloutOverlay.displayName = 'ElementCalloutOverlay';
+
+const ElementOverlayComponent = (props) => {
+    const { type, element, onClick, elementId } = props;
     const widthScale = useHeatmapViz((s) => s.widthScale);
+    const viewportHeight = useHeatmapVizRect((s) => s.iframeHeight);
+    const viewportWidth = useHeatmapConfigStore((s) => s.width);
     const overlayStyle = useMemo(() => {
-        if (!element || (element.width === 0 && element.height === 0))
+        const isInvalid = !element || (element.width === 0 && element.height === 0);
+        if (isInvalid)
             return null;
         return {
             top: element.top + HEATMAP_CONFIG['borderWidthIframe'],
             left: element.left + HEATMAP_CONFIG['borderWidthIframe'],
             width: element.width,
             height: element.height,
-            cursor: 'pointer',
         };
     }, [element]);
     if (!overlayStyle)
         return null;
     const isHovered = type === 'hovered';
     const badgeWidthScale = isHovered ? 1 : widthScale;
-    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: `heatmapElement heatmapElement--${type}`, id: elementId, style: overlayStyle }), jsx(RankBadge, { index: element.rank, elementRect: element, widthScale: badgeWidthScale, clickOnElement: onClick })] }));
+    const showCallout = !!element?.mousePosition && !isHovered;
+    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: `heatmapElement heatmapElement--${type}`, id: elementId, style: overlayStyle, children: showCallout && jsx(ElementCalloutOverlay, { ...props }) }), jsx(BackdropCanvas, { activeElement: overlayStyle, viewportWidth: viewportWidth, viewportHeight: viewportHeight, show: !isHovered }), jsx(RankBadge, { hash: element.hash, show: isHovered, index: element.rank, elementRect: element, widthScale: badgeWidthScale, clickOnElement: onClick })] }));
 };
 ElementOverlayComponent.displayName = 'ElementOverlay';
 const ElementOverlay = memo(ElementOverlayComponent);
 
-const HoveredElementCalloutComponent = ({ target }) => {
-    const hoveredElement = useHeatmapHover((s) => s.hoveredElement);
-    if (!hoveredElement)
+const ElementCalloutClickedComponent = (props) => {
+    const viewId = useViewIdContext();
+    const { clickedElement, showMissingElement, shouldShowCallout } = useClickedElement({
+        visualRef: props.visualRef,
+        getRect: props.getRect,
+    });
+    const elementId = getClickedElementId(viewId, props.isSecondary);
+    if (!clickedElement && showMissingElement)
+        return jsx(ElementMissing, { visualRef: props.visualRef });
+    if (!clickedElement)
         return null;
-    return jsx(ElementCallout, { element: hoveredElement, target: target, visualRef: { current: null } });
+    const isShowClickedElement = shouldShowCallout && !clickedElement?.mousePosition;
+    return (jsxs(Fragment, { children: [jsx(ElementOverlay, { type: "clicked", element: clickedElement, elementId: elementId, containerRef: props.containerRef }), isShowClickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${elementId}`, visualRef: props.visualRef, positionMode: props.positionMode }))] }));
 };
-memo(HoveredElementCalloutComponent);
+const ElementCalloutClicked = memo(ElementCalloutClickedComponent);
 
 const HoveredElementOverlayComponent = ({ onClick }) => {
     const viewId = useViewIdContext();
@@ -7756,16 +8051,19 @@ const HoveredElementOverlayComponent = ({ onClick }) => {
 };
 const HoveredElementOverlay = memo(HoveredElementOverlayComponent);
 
-const ELEMENT_CALLOUT = {
-    offset: { x: -8, y: 0 },
-    alignment: 'left',
+const IS_SHOW_CALLOUT = false;
+const ElementCalloutHoveredComponent = (props) => {
+    const viewId = useViewIdContext();
+    useHeatmapHover((s) => s.hoveredElement);
+    getHoveredElementId(viewId, props.isSecondary);
+    const isShowCallout = IS_SHOW_CALLOUT  ;
+    return (jsxs(Fragment, { children: [jsx(HoveredElementOverlay, { onClick: props.onClick }), isShowCallout ] }));
 };
-const IS_SHOW_HOVERED_ELEMENT = false;
+const ElementCalloutHovered = memo(ElementCalloutHoveredComponent);
+
 const HeatmapElements = (props) => {
     const viewId = useViewIdContext();
     const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
-    const clickedElementId = getClickedElementId(viewId, props.isSecondary);
-    getHoveredElementId(viewId, props.isSecondary);
     const elementCalloutRef = useRef(null);
     const { iframeDimensions, isVisible = true, areDefaultRanksHidden, positionMode } = props;
     const { getRect } = useHeatmapElementPosition({
@@ -7773,10 +8071,6 @@ const HeatmapElements = (props) => {
         wrapperRef: props.wrapperRef,
         visualizer: props.visualizer,
     });
-    const { clickedElement, showMissingElement, shouldShowCallout } = useClickedElement({
-        visualRef: props.visualRef,
-        getRect,
-    });
     const { handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({
         iframeRef: props.iframeRef,
         getRect,
@@ -7786,8 +8080,7 @@ const HeatmapElements = (props) => {
     useRenderCount('HeatmapElements');
     if (!isVisible)
         return null;
-    const isShowClickedElement = shouldShowCallout && clickedElement;
-    return (jsxs("div", { id: `gx-hm-elements-${viewId}`, ref: elementCalloutRef, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height: `${iframeHeight}px` }, children: [jsx(ElementMissing, { show: showMissingElement }), jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementOverlay, { type: "clicked", element: clickedElement, elementId: clickedElementId }), jsx(HoveredElementOverlay, { onClick: handleClick }), IS_SHOW_HOVERED_ELEMENT , isShowClickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${clickedElementId}`, visualRef: props.visualRef, positionMode: props.positionMode, ...ELEMENT_CALLOUT }))] }));
+    return (jsxs("div", { id: `gx-hm-elements-${viewId}`, ref: elementCalloutRef, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height: `${iframeHeight}px` }, children: [jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementCalloutClicked, { visualRef: props.visualRef, positionMode: props.positionMode, getRect: getRect, isSecondary: props.isSecondary, containerRef: elementCalloutRef }), jsx(ElementCalloutHovered, { visualRef: props.visualRef, onClick: handleClick, isSecondary: props.isSecondary, positionMode: props.positionMode })] }));
 };
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
@@ -8070,6 +8363,7 @@ const VizScrollMap = ({ iframeRef, wrapperRef }) => {
             width: `calc(100% - 4px)`,
             height: '100%',
             transform: 'translateZ(0)',
+            zIndex: 2,
         }, children: [jsx(ScrollmapMarker, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(AverageFoldLine, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(ScrollMapOverlay, { wrapperRef: wrapperRef, iframeRef: iframeRef })] }));
 };
 
@@ -8248,4 +8542,4 @@ const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataIn
     }
 };
 
-export { DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickMode, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHover, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapViz, useHeatmapVizRect, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };
+export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickMode, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHover, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapViz, useHeatmapVizRect, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };