@gemx-dev/heatmap-react 3.5.92-dev.37 → 3.5.92-dev.38

package/dist/esm/index.mjs

@@ -1698,6 +1698,61 @@ const clearCanvas = (canvas) => {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
 };
 
+const CLARITY_HEATMAP_CANVAS_ID = 'clarity-heatmap-canvas';
+const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha';
+function isIgnoredCanvas(element) {
+    if (element.tagName === 'CANVAS') {
+        return true;
+    }
+    if (element.id === CLARITY_HEATMAP_CANVAS_ID) {
+        return true;
+    }
+    return false;
+}
+
+const AREA_HOVER_BOX_SHADOW = '0 0 0 1px #0078D4, 0 0 0 1px #0078D4 inset, 0 0 0 2px white inset';
+const AREA_HOVER_ELEMENT_ID = 'clarity-edit-hover';
+const AREA_MAP_DIV_ATTRIBUTE = 'data-clarity-area-map-div';
+const HEATMAP_AREA_CONTAINER_CLASS = 'heatmap-area-container';
+const HEATMAP_AREA_CONTAINER_SELECTOR = `.${HEATMAP_AREA_CONTAINER_CLASS}`;
+const AREA_CONTAINER_STYLES = `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 999999;
+`;
+const AREA_INNER_CONTAINER_STYLES = `
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+const AREA_COLOR_GRADIENT = [
+    [0, 0, 255], // Blue
+    [0, 255, 255], // Cyan
+    [0, 255, 0], // Green
+    [255, 255, 0], // Yellow
+    [255, 0, 0], // Red
+];
+const AREA_RENDERER_SELECTORS = {
+    containerAttribute: AREA_MAP_DIV_ATTRIBUTE,
+    containerSelector: `[${AREA_MAP_DIV_ATTRIBUTE}]`,
+    innerContainerClass: HEATMAP_AREA_CONTAINER_CLASS,
+    innerContainerSelector: HEATMAP_AREA_CONTAINER_SELECTOR,
+};
+
+const CALLOUT_PADDING = 0;
+const CALLOUT_ARROW_SIZE = 8;
+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';
+const SECONDARY_HOVERED_ELEMENT_ID_BASE = 'gx-hm-secondary-hovered-element';
+const DEFAULT_POSITION_MODE = 'absolute';
+
 function isElementInViewport(elementRect, visualRef, scale) {
     if (!elementRect)
         return false;
@@ -1717,21 +1772,37 @@ function isElementInViewport(elementRect, visualRef, scale) {
     // Element is visible if it overlaps with the viewport
     return elementBottom > viewportTop && elementTop < viewportBottom;
 }
-function isElementRectInViewport(elementRect, visualRect, scale) {
-    if (!elementRect)
-        return false;
+function isElementRectInViewport(params) {
+    const { candidate, options } = params;
+    const { rectDimensions, visualViewport: visualRect, widthScale: scale, containerRect } = options;
     if (!visualRect)
         return false;
-    // Element position relative to the document (or container's content)
-    const elementTop = elementRect.top * scale;
-    const elementBottom = (elementRect.top + elementRect.height) * scale;
-    // Current scroll position
-    const scrollTop = (visualRect?.scrollTop || 0) - 8;
-    const viewportHeight = visualRect.height;
-    // Visible viewport range in the scrollable content
+    const { calloutRect, targetAbsoluteRect } = rectDimensions;
+    const { placement, horizontalAlign } = candidate;
+    // candidate position (relative to element) scaled + element absolute position in iframe
+    const offsetTop = (targetAbsoluteRect?.top ?? 0) * scale;
+    const offsetLeft = (targetAbsoluteRect?.left ?? 0) * scale;
+    // Base position in scroll space
+    const baseTop = candidate.top * scale + offsetTop;
+    const baseLeft = candidate.left * scale + offsetLeft;
+    const { width: calloutWidth, height: calloutHeight } = calloutRect;
+    const transformOffsetY = placement === 'top' ? calloutHeight * (scale - 1) : 0;
+    const transformOffsetX = horizontalAlign !== 'left' ? calloutWidth * (scale - 1) : 0;
+    const visualTop = baseTop + transformOffsetY + CALLOUT_ARROW_SIZE;
+    const visualBottom = visualTop + calloutHeight;
+    const visualLeft = baseLeft + transformOffsetX;
+    const visualRight = visualLeft + calloutWidth;
+    // Viewport bounds
+    const scrollTop = visualRect?.scrollTop || 0;
+    const scrollLeft = visualRect?.scrollLeft || 0;
     const viewportTop = scrollTop;
-    const viewportBottom = scrollTop + viewportHeight;
-    return elementTop > viewportTop && elementBottom < viewportBottom;
+    const viewportBottom = scrollTop + visualRect.height;
+    const viewportLeft = scrollLeft;
+    const viewportRight = scrollLeft + (containerRect?.width ?? visualRect.width);
+    // Check if element is fully within the visible viewport
+    const isInVertical = visualTop > viewportTop && visualBottom < viewportBottom;
+    const isInHorizontal = visualLeft > viewportLeft && visualRight < viewportRight;
+    return isInVertical && isInHorizontal;
 }
 
 function isMobileDevice(userAgent) {
@@ -1740,18 +1811,6 @@ function isMobileDevice(userAgent) {
     return /android|webos|iphone|ipad|ipod|blackberry|windows phone|opera mini|iemobile|mobile|silk|fennec|bada|tizen|symbian|nokia|palmsource|meego|sailfish|kindle|playbook|bb10|rim/i.test(userAgent);
 }
 
-const CLARITY_HEATMAP_CANVAS_ID = 'clarity-heatmap-canvas';
-const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha';
-function isIgnoredCanvas(element) {
-    if (element.tagName === 'CANVAS') {
-        return true;
-    }
-    if (element.id === CLARITY_HEATMAP_CANVAS_ID) {
-        return true;
-    }
-    return false;
-}
-
 /**
  * Get all elements at a specific point (x, y), with support for Shadow DOM
  */
@@ -2023,49 +2082,6 @@ const throttleRAF = (callback) => {
     return throttled;
 };
 
-const AREA_HOVER_BOX_SHADOW = '0 0 0 1px #0078D4, 0 0 0 1px #0078D4 inset, 0 0 0 2px white inset';
-const AREA_HOVER_ELEMENT_ID = 'clarity-edit-hover';
-const AREA_MAP_DIV_ATTRIBUTE = 'data-clarity-area-map-div';
-const HEATMAP_AREA_CONTAINER_CLASS = 'heatmap-area-container';
-const HEATMAP_AREA_CONTAINER_SELECTOR = `.${HEATMAP_AREA_CONTAINER_CLASS}`;
-const AREA_CONTAINER_STYLES = `
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 999999;
-`;
-const AREA_INNER_CONTAINER_STYLES = `
-  position: relative;
-  width: 100%;
-  height: 100%;
-`;
-const AREA_COLOR_GRADIENT = [
-    [0, 0, 255], // Blue
-    [0, 255, 255], // Cyan
-    [0, 255, 0], // Green
-    [255, 255, 0], // Yellow
-    [255, 0, 0], // Red
-];
-const AREA_RENDERER_SELECTORS = {
-    containerAttribute: AREA_MAP_DIV_ATTRIBUTE,
-    containerSelector: `[${AREA_MAP_DIV_ATTRIBUTE}]`,
-    innerContainerClass: HEATMAP_AREA_CONTAINER_CLASS,
-    innerContainerSelector: HEATMAP_AREA_CONTAINER_SELECTOR,
-};
-
-const CALLOUT_PADDING = 0;
-const CALLOUT_ARROW_SIZE = 8;
-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';
-const SECONDARY_HOVERED_ELEMENT_ID_BASE = 'gx-hm-secondary-hovered-element';
-const DEFAULT_POSITION_MODE = 'absolute';
-
 /**
  * Get color from click distribution percentage (0-100)
  */
@@ -2692,7 +2708,7 @@ const getContainerViewport = (containerElm, _scale) => {
     if (containerElm) {
         const containerRect = containerElm.getBoundingClientRect();
         const width = containerRect.width;
-        const height = containerRect.width;
+        const height = containerRect.height;
         return { width, height };
     }
     return {
@@ -2893,19 +2909,12 @@ const generateHorizontalPositionCandidates = (options) => {
     });
 };
 const generateAllCandidates = (options) => {
-    const { visualViewport, rectDimensions } = options;
     const verticalCandidates = generateVerticalPositionCandidates(options);
     const horizontalCandidates = generateHorizontalPositionCandidates(options);
     const allCandidates = [...verticalCandidates, ...horizontalCandidates];
-    // Thêm isVisibleInViewport cho mỗi candidate
     return allCandidates.map((candidate) => ({
         ...candidate,
-        isVisibleInViewport: isElementRectInViewport({
-            top: candidate.top,
-            left: candidate.left,
-            width: rectDimensions.calloutRect.width,
-            height: rectDimensions.calloutRect.height,
-        }, visualViewport || { scrollTop: 0, scrollLeft: 0, width: 0, height: 0 }, options.widthScale),
+        isVisibleInViewport: isElementRectInViewport({ candidate, options }),
     }));
 };
 
@@ -2913,6 +2922,12 @@ const selectBestPosition = (candidates) => {
     // return candidates.find((p) => p.valid && p.isVisibleInViewport) || candidates[0];
     return candidates.find((p) => p.valid) || candidates[0];
 };
+const selectBestPositionForClick = (candidates) => {
+    return (candidates.find((p) => p.valid && p.isVisibleInViewport) ||
+        candidates.find((p) => p.isVisibleInViewport) ||
+        candidates.find((p) => p.valid) ||
+        candidates[0]);
+};
 const constrainToViewport = (candidate, options) => {
     const { containerRect, padding, rectDimensions, viewport } = options;
     const { calloutRect } = rectDimensions;
@@ -3025,7 +3040,7 @@ const calcCalloutPosition = (options) => {
     };
 };
 const calcCalloutPositionAbsolute = (props) => {
-    const { widthScale, calloutElm, containerElm, element, setPosition } = props;
+    const { widthScale, calloutElm, containerElm, element, visualRef, setPosition } = props;
     const mousePosition = element?.mousePosition;
     if (!mousePosition)
         return;
@@ -3056,28 +3071,57 @@ const calcCalloutPositionAbsolute = (props) => {
             left: element.left,
         },
     };
-    const viewport = getContainerViewport(containerElm);
+    const { viewportInfo } = calcPositionDetail({ element, widthScale, visualRef: visualRef ?? undefined });
     const options = {
         rectDimensions,
-        viewport,
+        viewport: viewportInfo,
         alignment: CALLOUT_ALIGNMENT,
         offset: CALLOUT_OFFSET,
         padding,
         arrowSize,
         containerRect,
         widthScale,
+        visualViewport: viewportInfo,
     };
     const candidates = generateAllCandidates(options);
-    const bestPosition = selectBestPosition(candidates);
-    const finalPosition = {
-        top: bestPosition.top,
-        left: bestPosition.left,
-        placement: bestPosition.placement,
-        horizontalAlign: bestPosition.horizontalAlign,
-    };
-    setPosition(finalPosition);
-    // const styleBestPosition = getStyleFromCandidate(bestPosition, widthScale);
-    // onChange(styleBestPosition);
+    const bestPosition = selectBestPositionForClick(candidates);
+    setPosition(bestPosition);
+};
+const calcPositionDetail = ({ element, widthScale, visualRef }) => {
+    const mousePosition = element.mousePosition;
+    // visualRef = scrollable viewport (gx-hm-visual), clientWidth/Height = visible area
+    const visual = visualRef?.current;
+    const viewportInfo = {
+        width: visual?.clientWidth ?? 0,
+        height: visual?.clientHeight ?? 0,
+        scrollTop: visual?.scrollTop ?? 0,
+        scrollLeft: visual?.scrollLeft ?? 0,
+    };
+    const elementInfo = {
+        ...element,
+        top: element.top * widthScale,
+        left: element.left * widthScale,
+        width: element.width * widthScale,
+        height: element.height * widthScale,
+    };
+    const result = {
+        elementInfo,
+        viewportInfo,
+        elementToIframe: { x: elementInfo.left, y: elementInfo.top },
+        elementToViewport: { x: elementInfo.left - viewportInfo.scrollLeft, y: elementInfo.top - viewportInfo.scrollTop },
+    };
+    if (mousePosition) {
+        // mousePosition is relative to the element (0,0 = top-left of element)
+        const mx = mousePosition.x;
+        const my = mousePosition.y;
+        // Convert to iframe coordinate space
+        const iframeMx = elementInfo.left + mx;
+        const iframeMy = elementInfo.top + my;
+        result.mouseToIframe = { x: iframeMx, y: iframeMy };
+        result.mouseToElement = { x: mx, y: my };
+        result.mouseToViewport = { x: iframeMx - viewportInfo.scrollLeft, y: iframeMy - viewportInfo.scrollTop };
+    }
+    return result;
 };
 
 function validateAreaCreation(dataInfo, hash, areas) {
@@ -8493,8 +8537,9 @@ const ElementCalloutOverlay = (props) => {
             containerElm,
             element,
             setPosition,
+            visualRef: props.visualRef,
         });
-    }, [element, widthScale, containerRef]);
+    }, [element, widthScale, containerRef, props.visualRef]);
     if (!element)
         return null;
     return (jsx("div", { ref: calloutRef, style: calloutStyle, className: "clarity-callout", children: CompElementCallout && jsx(CompElementCallout, { elementHash: element.hash }) }));
@@ -8539,7 +8584,7 @@ const ElementCalloutClickedComponent = (props) => {
     if (!clickedElement)
         return 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 }))] }));
+    return (jsxs(Fragment, { children: [jsx(ElementOverlay, { type: "clicked", element: clickedElement, elementId: elementId, containerRef: props.containerRef, visualRef: props.visualRef }), isShowClickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${elementId}`, visualRef: props.visualRef, positionMode: props.positionMode }))] }));
 };
 const ElementCalloutClicked = memo(ElementCalloutClickedComponent);
 

package/dist/esm/types/viz-elm-callout.d.ts

@@ -107,5 +107,6 @@ export interface ICalcCalloutPositionAbsoluteProps {
     containerElm: HTMLDivElement;
     element: ElementInfo;
     setPosition: (position: ICalloutPosition) => void;
+    visualRef?: IHeatmapRef['Visual'] | null;
 }
 //# sourceMappingURL=viz-elm-callout.d.ts.map

package/dist/esm/types/viz-elm-callout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viz-elm-callout.d.ts","sourceRoot":"","sources":["../../src/types/viz-elm-callout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AACpD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG,oBAAoB,CAAC;AAC1E,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,GAAG,QAAQ,CAAC;AAEnE,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,iBAAiB,CAAC;IAC7B,eAAe,EAAE,oBAAoB,CAAC;CACvC;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB;IAC7D,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,kBAAkB,CAAC,EAAE;QACnB,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,WAAW,EAAE,YAAY,CAAC;CAC3B;AAED,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,SAAS,EAAE,iBAAiB,CAAC;IAC7B,eAAe,EAAE,oBAAoB,CAAC;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,wBAAwB;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,wBAAwB;IACvC,cAAc,EAAE,eAAe,CAAC;IAChC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,SAAS,EAAE,oBAAoB,CAAC;IAChC,MAAM,EAAE,wBAAwB,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAID,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,WAAW,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,SAAS,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;CAC1C;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,aAAa,CAAC;IAC5B,eAAe,EAAE,WAAW,CAAC;IAC7B,iBAAiB,EAAE,WAAW,CAAC;IAC/B,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,eAAe,CAAC,EAAE,WAAW,CAAC;CAC/B,CAAC;AAEF,MAAM,WAAW,iCAAiC;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACnD"}
+{"version":3,"file":"viz-elm-callout.d.ts","sourceRoot":"","sources":["../../src/types/viz-elm-callout.ts"],"names":[],"mappings":"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"}

package/dist/umd/components/VizElement/ElementCalloutOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementCalloutOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCalloutOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8C/D,CAAC"}
+{"version":3,"file":"ElementCalloutOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCalloutOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+C/D,CAAC"}

package/dist/umd/components/VizElement/ElementOverlay.d.ts

@@ -1,4 +1,4 @@
-import type { ElementInfo } from '../../types';
+import type { ElementInfo, IHeatmapRef } from '../../types';
 export interface ElementOverlayProps {
     type: 'hovered' | 'clicked';
     element: ElementInfo | null;
@@ -6,6 +6,7 @@ export interface ElementOverlayProps {
     elementId: string;
     containerRef?: React.RefObject<HTMLDivElement>;
     onClick?: (event?: React.MouseEvent<HTMLDivElement>) => void;
+    visualRef?: IHeatmapRef['Visual'] | null;
 }
 export declare const ElementOverlay: import("react").NamedExoticComponent<ElementOverlayProps>;
 //# sourceMappingURL=ElementOverlay.d.ts.map

package/dist/umd/components/VizElement/ElementOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAS/C,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC9D;AA2DD,eAAO,MAAM,cAAc,2DAAgC,CAAC"}
+{"version":3,"file":"ElementOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAS5D,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;CAC1C;AA2DD,eAAO,MAAM,cAAc,2DAAgC,CAAC"}

package/dist/umd/helpers/viewport/element.d.ts

@@ -1,4 +1,9 @@
-import type { ElementRect, IHeatmapRef, IVisualDomViewport } from '../../types';
+import type { ElementRect, IHeatmapRef, IPositionCandidate, IPositionCandidateOption } from '../../types';
 export declare function isElementInViewport(elementRect: ElementRect, visualRef: IHeatmapRef['Visual'], scale: number): boolean;
-export declare function isElementRectInViewport(elementRect: ElementRect, visualRect: IVisualDomViewport, scale: number): boolean;
+interface IElementRectInViewportParams {
+    candidate: IPositionCandidate;
+    options: IPositionCandidateOption;
+}
+export declare function isElementRectInViewport(params: IElementRectInViewportParams): boolean;
+export {};
 //# sourceMappingURL=element.d.ts.map

package/dist/umd/helpers/viewport/element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../../src/helpers/viewport/element.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEhF,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,EAChC,KAAK,EAAE,MAAM,GACZ,OAAO,CAqBT;AAED,wBAAgB,uBAAuB,CACrC,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,kBAAkB,EAC9B,KAAK,EAAE,MAAM,GACZ,OAAO,CAoBT"}
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../../src/helpers/viewport/element.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,aAAa,CAAC;AAIrB,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,EAChC,KAAK,EAAE,MAAM,GACZ,OAAO,CAqBT;AAED,UAAU,4BAA4B;IACpC,SAAS,EAAE,kBAAkB,CAAC;IAC9B,OAAO,EAAE,wBAAwB,CAAC;CACnC;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,4BAA4B,GAAG,OAAO,CAsCrF"}

package/dist/umd/helpers/viz-elm-callout/position-candidates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position-candidates.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/position-candidates.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,kBAAkB,EAClB,wBAAwB,EAEzB,MAAM,aAAa,CAAC;AAgBrB,eAAO,MAAM,kCAAkC,GAAI,SAAS,wBAAwB,KAAG,kBAAkB,EA+BxG,CAAC;AAEF,eAAO,MAAM,oCAAoC,GAAI,SAAS,wBAAwB,KAAG,kBAAkB,EAU1G,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,SAAS,wBAAwB,KAAG,kBAAkB,EAsB3F,CAAC"}
+{"version":3,"file":"position-candidates.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/position-candidates.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,kBAAkB,EAClB,wBAAwB,EAEzB,MAAM,aAAa,CAAC;AAgBrB,eAAO,MAAM,kCAAkC,GAAI,SAAS,wBAAwB,KAAG,kBAAkB,EA+BxG,CAAC;AAEF,eAAO,MAAM,oCAAoC,GAAI,SAAS,wBAAwB,KAAG,kBAAkB,EAU1G,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,SAAS,wBAAwB,KAAG,kBAAkB,EAU3F,CAAC"}

package/dist/umd/helpers/viz-elm-callout/position-selector.d.ts

@@ -1,4 +1,5 @@
 import type { IPositionCandidate, IPositionCandidateBase, IPositionCandidateOption } from '../../types';
 export declare const selectBestPosition: (candidates: IPositionCandidate[]) => IPositionCandidate;
+export declare const selectBestPositionForClick: (candidates: IPositionCandidate[]) => IPositionCandidate;
 export declare const constrainToViewport: (candidate: IPositionCandidate, options: IPositionCandidateOption) => IPositionCandidateBase;
 //# sourceMappingURL=position-selector.d.ts.map

package/dist/umd/helpers/viz-elm-callout/position-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position-selector.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/position-selector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAExG,eAAO,MAAM,kBAAkB,GAAI,YAAY,kBAAkB,EAAE,KAAG,kBAGrE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,WAAW,kBAAkB,EAC7B,SAAS,wBAAwB,KAChC,sBA0BF,CAAC"}
+{"version":3,"file":"position-selector.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/position-selector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAExG,eAAO,MAAM,kBAAkB,GAAI,YAAY,kBAAkB,EAAE,KAAG,kBAGrE,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,YAAY,kBAAkB,EAAE,KAAG,kBAO7E,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,WAAW,kBAAkB,EAC7B,SAAS,wBAAwB,KAChC,sBA0BF,CAAC"}

package/dist/umd/helpers/viz-elm-callout/viz-elm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viz-elm.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/viz-elm.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iCAAiC,EACjC,yBAAyB,EACzB,wBAAwB,EAIxB,eAAe,EAGhB,MAAM,aAAa,CAAC;AAgErB,eAAO,MAAM,mBAAmB,GAAI,SAAS,yBAAyB,eAkDrE,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,OAAO,iCAAiC,SAiEnF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,oCAAoC,wBAAwB,KAAG,eAgCjG,CAAC"}
+{"version":3,"file":"viz-elm.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/viz-elm.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iCAAiC,EACjC,yBAAyB,EACzB,wBAAwB,EAIxB,eAAe,EAEhB,MAAM,aAAa,CAAC;AAgErB,eAAO,MAAM,mBAAmB,GAAI,SAAS,yBAAyB,eAkDrE,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,OAAO,iCAAiC,SAwDnF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,oCAAoC,wBAAwB,KAAG,eA0CjG,CAAC"}