@gemx-dev/heatmap-react 3.5.59 → 3.5.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/VizElement/ElementOverlay.d.ts +1 -0
- package/dist/esm/components/VizElement/ElementOverlay.d.ts.map +1 -1
- package/dist/esm/components/VizElement/HeatmapElements.d.ts +1 -1
- package/dist/esm/components/VizElement/HeatmapElements.d.ts.map +1 -1
- package/dist/esm/components/VizElement/HoveredElementOverlay.d.ts.map +1 -1
- package/dist/esm/components/VizElement/RankBadge.d.ts.map +1 -1
- package/dist/esm/configs/backdrop.d.ts +1 -1
- package/dist/esm/configs/elm-callout.d.ts +6 -0
- package/dist/esm/configs/elm-callout.d.ts.map +1 -0
- package/dist/esm/configs/index.d.ts +1 -0
- package/dist/esm/configs/index.d.ts.map +1 -1
- package/dist/esm/helpers/viewport/element.d.ts +2 -1
- package/dist/esm/helpers/viewport/element.d.ts.map +1 -1
- package/dist/esm/helpers/viz-elm-callout/dimensions.d.ts +3 -2
- package/dist/esm/helpers/viz-elm-callout/dimensions.d.ts.map +1 -1
- package/dist/esm/helpers/viz-elm-callout/position-candidates.d.ts.map +1 -1
- package/dist/esm/helpers/viz-elm-callout/position-selector.d.ts.map +1 -1
- package/dist/esm/helpers/viz-elm-callout/viz-elm.d.ts.map +1 -1
- package/dist/esm/hooks/viz-elm/useHeatmapEffects.d.ts.map +1 -1
- package/dist/esm/hooks/viz-elm/useHoveredElement.d.ts.map +1 -1
- package/dist/esm/index.js +89 -28
- package/dist/esm/index.mjs +89 -28
- package/dist/esm/types/viz-elm-callout.d.ts +6 -0
- package/dist/esm/types/viz-elm-callout.d.ts.map +1 -1
- package/dist/style.css +8 -3
- package/dist/umd/components/VizElement/ElementOverlay.d.ts +1 -0
- package/dist/umd/components/VizElement/ElementOverlay.d.ts.map +1 -1
- package/dist/umd/components/VizElement/HeatmapElements.d.ts +1 -1
- package/dist/umd/components/VizElement/HeatmapElements.d.ts.map +1 -1
- package/dist/umd/components/VizElement/HoveredElementOverlay.d.ts.map +1 -1
- package/dist/umd/components/VizElement/RankBadge.d.ts.map +1 -1
- package/dist/umd/configs/backdrop.d.ts +1 -1
- package/dist/umd/configs/elm-callout.d.ts +6 -0
- package/dist/umd/configs/elm-callout.d.ts.map +1 -0
- package/dist/umd/configs/index.d.ts +1 -0
- package/dist/umd/configs/index.d.ts.map +1 -1
- package/dist/umd/helpers/viewport/element.d.ts +2 -1
- package/dist/umd/helpers/viewport/element.d.ts.map +1 -1
- package/dist/umd/helpers/viz-elm-callout/dimensions.d.ts +3 -2
- package/dist/umd/helpers/viz-elm-callout/dimensions.d.ts.map +1 -1
- package/dist/umd/helpers/viz-elm-callout/position-candidates.d.ts.map +1 -1
- package/dist/umd/helpers/viz-elm-callout/position-selector.d.ts.map +1 -1
- package/dist/umd/helpers/viz-elm-callout/viz-elm.d.ts.map +1 -1
- package/dist/umd/hooks/viz-elm/useHeatmapEffects.d.ts.map +1 -1
- package/dist/umd/hooks/viz-elm/useHoveredElement.d.ts.map +1 -1
- package/dist/umd/index.js +2 -2
- package/dist/umd/types/viz-elm-callout.d.ts +6 -0
- package/dist/umd/types/viz-elm-callout.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/esm/index.mjs
CHANGED
|
@@ -57,13 +57,19 @@ const BACKDROP_CONFIG = {
|
|
|
57
57
|
* Default cutout expansion (pixels)
|
|
58
58
|
* Adds padding around the active element cutout
|
|
59
59
|
*/
|
|
60
|
-
CUTOUT_EXPANSION:
|
|
60
|
+
CUTOUT_EXPANSION: 0,
|
|
61
61
|
/**
|
|
62
62
|
* Z-index for backdrop canvas
|
|
63
63
|
*/
|
|
64
64
|
Z_INDEX: 999,
|
|
65
65
|
};
|
|
66
66
|
|
|
67
|
+
const ELM_CALLOUT_CONFIG = {
|
|
68
|
+
MOUSE_POSITION: true,
|
|
69
|
+
SHOW_RANK_BADGE: false,
|
|
70
|
+
HIDE_OUTLINE_ON_CLICKED: true,
|
|
71
|
+
};
|
|
72
|
+
|
|
67
73
|
// Portal mode: Full permissions for proper functionality
|
|
68
74
|
// Need allow-forms for add to cart, allow-popups for some features
|
|
69
75
|
const HEATMAP_IFRAME = {
|
|
@@ -1351,6 +1357,25 @@ function isElementInViewport(elementRect, visualRef, scale) {
|
|
|
1351
1357
|
// Element is visible if it overlaps with the viewport
|
|
1352
1358
|
return elementBottom > viewportTop && elementTop < viewportBottom;
|
|
1353
1359
|
}
|
|
1360
|
+
function isElementRectInViewport(elementRect, visualRect, scale) {
|
|
1361
|
+
if (!elementRect)
|
|
1362
|
+
return false;
|
|
1363
|
+
if (!visualRect)
|
|
1364
|
+
return false;
|
|
1365
|
+
// Element position relative to the document (or container's content)
|
|
1366
|
+
const elementTop = elementRect.top * scale;
|
|
1367
|
+
console.log(`🚀 🐥 ~ isElementRectInViewport ~ scale:`, scale);
|
|
1368
|
+
console.log(`🚀 🐥 ~ isElementRectInViewport ~ elementRect.top:`, elementRect.top);
|
|
1369
|
+
const elementBottom = (elementRect.top + elementRect.height) * scale;
|
|
1370
|
+
// Current scroll position
|
|
1371
|
+
const scrollTop = (visualRect?.scrollTop || 0) - 8;
|
|
1372
|
+
console.log(`🚀 🐥 ~ isElementRectInViewport ~ visualRect?.scrollTop:`, visualRect?.scrollTop);
|
|
1373
|
+
const viewportHeight = visualRect.height;
|
|
1374
|
+
// Visible viewport range in the scrollable content
|
|
1375
|
+
const viewportTop = scrollTop;
|
|
1376
|
+
const viewportBottom = scrollTop + viewportHeight;
|
|
1377
|
+
return elementTop > viewportTop && elementBottom < viewportBottom;
|
|
1378
|
+
}
|
|
1354
1379
|
|
|
1355
1380
|
const CLARITY_HEATMAP_CANVAS_ID = 'clarity-heatmap-canvas';
|
|
1356
1381
|
const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha';
|
|
@@ -2241,7 +2266,7 @@ function calculateRankPosition(rect, widthScale) {
|
|
|
2241
2266
|
};
|
|
2242
2267
|
}
|
|
2243
2268
|
|
|
2244
|
-
const
|
|
2269
|
+
const getContainerViewport = (containerElm, _scale) => {
|
|
2245
2270
|
if (containerElm) {
|
|
2246
2271
|
const containerRect = containerElm.getBoundingClientRect();
|
|
2247
2272
|
const width = containerRect.width;
|
|
@@ -2253,6 +2278,23 @@ const getViewportDimensions = (containerElm, _scale) => {
|
|
|
2253
2278
|
height: window.innerHeight,
|
|
2254
2279
|
};
|
|
2255
2280
|
};
|
|
2281
|
+
const getVisualDomViewport = (visualDomElm, scale = 1) => {
|
|
2282
|
+
if (visualDomElm) {
|
|
2283
|
+
const rect = visualDomElm.getBoundingClientRect();
|
|
2284
|
+
return {
|
|
2285
|
+
width: rect.width,
|
|
2286
|
+
height: rect.height,
|
|
2287
|
+
scrollTop: visualDomElm.scrollTop,
|
|
2288
|
+
scrollLeft: visualDomElm.scrollLeft,
|
|
2289
|
+
};
|
|
2290
|
+
}
|
|
2291
|
+
return {
|
|
2292
|
+
width: window.innerWidth,
|
|
2293
|
+
height: window.innerHeight,
|
|
2294
|
+
scrollTop: 0,
|
|
2295
|
+
scrollLeft: 0,
|
|
2296
|
+
};
|
|
2297
|
+
};
|
|
2256
2298
|
const getElementDimensions = (options) => {
|
|
2257
2299
|
const { targetElm, calloutElm, scale, containerElm } = options;
|
|
2258
2300
|
const targetRect = targetElm.getBoundingClientRect();
|
|
@@ -2429,12 +2471,24 @@ const generateHorizontalPositionCandidates = (options) => {
|
|
|
2429
2471
|
});
|
|
2430
2472
|
};
|
|
2431
2473
|
const generateAllCandidates = (options) => {
|
|
2474
|
+
const { visualViewport, rectDimensions } = options;
|
|
2432
2475
|
const verticalCandidates = generateVerticalPositionCandidates(options);
|
|
2433
2476
|
const horizontalCandidates = generateHorizontalPositionCandidates(options);
|
|
2434
|
-
|
|
2477
|
+
const allCandidates = [...verticalCandidates, ...horizontalCandidates];
|
|
2478
|
+
// Thêm isVisibleInViewport cho mỗi candidate
|
|
2479
|
+
return allCandidates.map((candidate) => ({
|
|
2480
|
+
...candidate,
|
|
2481
|
+
isVisibleInViewport: isElementRectInViewport({
|
|
2482
|
+
top: candidate.top,
|
|
2483
|
+
left: candidate.left,
|
|
2484
|
+
width: rectDimensions.calloutRect.width,
|
|
2485
|
+
height: rectDimensions.calloutRect.height,
|
|
2486
|
+
}, visualViewport || { scrollTop: 0, scrollLeft: 0, width: 0, height: 0 }, options.widthScale),
|
|
2487
|
+
}));
|
|
2435
2488
|
};
|
|
2436
2489
|
|
|
2437
2490
|
const selectBestPosition = (candidates) => {
|
|
2491
|
+
// return candidates.find((p) => p.valid && p.isVisibleInViewport) || candidates[0];
|
|
2438
2492
|
return candidates.find((p) => p.valid) || candidates[0];
|
|
2439
2493
|
};
|
|
2440
2494
|
const constrainToViewport = (candidate, options) => {
|
|
@@ -2519,12 +2573,14 @@ const calcCalloutPosition = (options) => {
|
|
|
2519
2573
|
const containerElm = isAbsolute ? calloutElm.parentElement : visualRef?.current;
|
|
2520
2574
|
if (!containerElm)
|
|
2521
2575
|
return;
|
|
2522
|
-
const viewport =
|
|
2576
|
+
const viewport = getContainerViewport(containerElm);
|
|
2577
|
+
const visualViewport = getVisualDomViewport(visualRef?.current, scale);
|
|
2523
2578
|
const rectDimensions = getElementDimensions({ targetElm, calloutElm, scale, containerElm });
|
|
2524
2579
|
const containerRect = createAdjustedContainerRect({ containerElm, scale, isAbsolute, visualRef });
|
|
2525
2580
|
const options = {
|
|
2526
2581
|
rectDimensions,
|
|
2527
2582
|
viewport,
|
|
2583
|
+
visualViewport,
|
|
2528
2584
|
alignment,
|
|
2529
2585
|
offset,
|
|
2530
2586
|
padding,
|
|
@@ -2578,7 +2634,7 @@ const calcCalloutPositionAbsolute = (props) => {
|
|
|
2578
2634
|
left: element.left,
|
|
2579
2635
|
},
|
|
2580
2636
|
};
|
|
2581
|
-
const viewport =
|
|
2637
|
+
const viewport = getContainerViewport(containerElm);
|
|
2582
2638
|
const options = {
|
|
2583
2639
|
rectDimensions,
|
|
2584
2640
|
viewport,
|
|
@@ -4415,8 +4471,8 @@ const useElementCalloutVisible = ({ visualRef, getRect, positionMode }) => {
|
|
|
4415
4471
|
};
|
|
4416
4472
|
|
|
4417
4473
|
const useHeatmapEffects = ({ isVisible }) => {
|
|
4418
|
-
useHeatmapClick((s) => s.selectedElement);
|
|
4419
|
-
useHeatmapClick((s) => s.setShouldShowCallout);
|
|
4474
|
+
// const selectedElement = useHeatmapClick((s) => s.selectedElement);
|
|
4475
|
+
// const setShouldShowCallout = useHeatmapClick((s) => s.setShouldShowCallout);
|
|
4420
4476
|
const resetAll = () => {
|
|
4421
4477
|
// setShouldShowCallout(false);
|
|
4422
4478
|
};
|
|
@@ -4641,6 +4697,8 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
|
|
|
4641
4697
|
};
|
|
4642
4698
|
};
|
|
4643
4699
|
const getElementMousePosition = (event, widthScale) => {
|
|
4700
|
+
if (!ELM_CALLOUT_CONFIG.MOUSE_POSITION)
|
|
4701
|
+
return;
|
|
4644
4702
|
const containerElm = event.target;
|
|
4645
4703
|
if (!containerElm)
|
|
4646
4704
|
return;
|
|
@@ -6587,7 +6645,7 @@ const useObserveIframeHeight = (props) => {
|
|
|
6587
6645
|
};
|
|
6588
6646
|
|
|
6589
6647
|
// Max zoom ratio constant: 100% = fit to width
|
|
6590
|
-
const MAX_ZOOM_RATIO =
|
|
6648
|
+
const MAX_ZOOM_RATIO = 200;
|
|
6591
6649
|
const useScaleCalculation = (props) => {
|
|
6592
6650
|
const widthScale = useHeatmapViz((s) => s.widthScale);
|
|
6593
6651
|
const zoomRatio = useHeatmapViz((s) => s.zoomRatio);
|
|
@@ -7765,7 +7823,7 @@ VizAreaClick.displayName = 'VizAreaClick';
|
|
|
7765
7823
|
const RankBadgeComponent = ({ index, hash, elementRect, widthScale, show = true, clickOnElement, }) => {
|
|
7766
7824
|
const clickedHash = useHeatmapClick((s) => s.selectedElement?.hash);
|
|
7767
7825
|
const isShow = !!show && clickedHash !== hash;
|
|
7768
|
-
if (!isShow)
|
|
7826
|
+
if (!isShow || !ELM_CALLOUT_CONFIG.SHOW_RANK_BADGE)
|
|
7769
7827
|
return null;
|
|
7770
7828
|
const style = calculateRankPosition(elementRect, widthScale);
|
|
7771
7829
|
return (jsx("div", { className: "gx-hm-rank-badge", style: style, onClick: clickOnElement, children: index }));
|
|
@@ -7839,10 +7897,17 @@ const useAnchorPosition = (calloutRef, props) => {
|
|
|
7839
7897
|
const calloutElm = calloutRef.current;
|
|
7840
7898
|
if (!targetElm || !calloutElm)
|
|
7841
7899
|
return;
|
|
7900
|
+
const onSetPosition = (position) => {
|
|
7901
|
+
setPosition((prev) => {
|
|
7902
|
+
if (prev.top === position.top && prev.left === position.left)
|
|
7903
|
+
return prev;
|
|
7904
|
+
return position;
|
|
7905
|
+
});
|
|
7906
|
+
};
|
|
7842
7907
|
const positionFn = calcCalloutPosition({
|
|
7843
7908
|
targetElm,
|
|
7844
7909
|
calloutElm,
|
|
7845
|
-
setPosition,
|
|
7910
|
+
setPosition: onSetPosition,
|
|
7846
7911
|
alignment,
|
|
7847
7912
|
positionMode,
|
|
7848
7913
|
visualRef,
|
|
@@ -8025,7 +8090,7 @@ const ElementCalloutOverlay = (props) => {
|
|
|
8025
8090
|
ElementCalloutOverlay.displayName = 'ElementCalloutOverlay';
|
|
8026
8091
|
|
|
8027
8092
|
const ElementOverlayComponent = (props) => {
|
|
8028
|
-
const { type, element, onClick, elementId } = props;
|
|
8093
|
+
const { type, element, onClick, elementId, hideOutline } = props;
|
|
8029
8094
|
const widthScale = useHeatmapViz((s) => s.widthScale);
|
|
8030
8095
|
const viewportHeight = useHeatmapVizRect((s) => s.iframeHeight);
|
|
8031
8096
|
const viewportWidth = useHeatmapConfigStore((s) => s.width);
|
|
@@ -8045,7 +8110,7 @@ const ElementOverlayComponent = (props) => {
|
|
|
8045
8110
|
const isHovered = type === 'hovered';
|
|
8046
8111
|
const badgeWidthScale = isHovered ? 1 : widthScale;
|
|
8047
8112
|
const showCallout = !!element?.mousePosition && !isHovered;
|
|
8048
|
-
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 })] }));
|
|
8113
|
+
return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: `heatmapElement heatmapElement--${type} ${hideOutline ? 'heatmapElement--hide-outline' : ''}`, 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 })] }));
|
|
8049
8114
|
};
|
|
8050
8115
|
ElementOverlayComponent.displayName = 'ElementOverlay';
|
|
8051
8116
|
const ElementOverlay = memo(ElementOverlayComponent);
|
|
@@ -8069,6 +8134,7 @@ const ElementCalloutClicked = memo(ElementCalloutClickedComponent);
|
|
|
8069
8134
|
const HoveredElementOverlayComponent = ({ onClick }) => {
|
|
8070
8135
|
const viewId = useViewIdContext();
|
|
8071
8136
|
const hoveredElement = useHeatmapHover((s) => s.hoveredElement);
|
|
8137
|
+
const clickedElement = useHeatmapClick((s) => s.selectedElement);
|
|
8072
8138
|
const handleClick = (event) => {
|
|
8073
8139
|
if (onClick) {
|
|
8074
8140
|
onClick(event, hoveredElement?.hash ?? '');
|
|
@@ -8077,7 +8143,8 @@ const HoveredElementOverlayComponent = ({ onClick }) => {
|
|
|
8077
8143
|
if (!hoveredElement)
|
|
8078
8144
|
return null;
|
|
8079
8145
|
const elementId = getHoveredElementId(viewId, false);
|
|
8080
|
-
|
|
8146
|
+
const hideOutline = clickedElement?.hash === hoveredElement?.hash && ELM_CALLOUT_CONFIG.HIDE_OUTLINE_ON_CLICKED;
|
|
8147
|
+
return (jsx(Fragment$1, { children: jsx(ElementOverlay, { type: "hovered", element: hoveredElement, elementId: elementId, onClick: handleClick, hideOutline: hideOutline }) }));
|
|
8081
8148
|
};
|
|
8082
8149
|
const HoveredElementOverlay = memo(HoveredElementOverlayComponent);
|
|
8083
8150
|
|
|
@@ -8095,22 +8162,16 @@ const HeatmapElements = (props) => {
|
|
|
8095
8162
|
const viewId = useViewIdContext();
|
|
8096
8163
|
const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
|
|
8097
8164
|
const elementCalloutRef = useRef(null);
|
|
8098
|
-
const { iframeDimensions,
|
|
8099
|
-
const {
|
|
8100
|
-
|
|
8101
|
-
|
|
8102
|
-
|
|
8103
|
-
});
|
|
8104
|
-
const { handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({
|
|
8105
|
-
iframeRef: props.iframeRef,
|
|
8106
|
-
getRect,
|
|
8107
|
-
});
|
|
8108
|
-
useElementCalloutVisible({ visualRef: props.visualRef, getRect, positionMode });
|
|
8165
|
+
const { iframeDimensions, positionMode } = props;
|
|
8166
|
+
const { visualRef, iframeRef, wrapperRef, visualizer } = props;
|
|
8167
|
+
const { isVisible = true, isSecondary, isHideTopRank } = props;
|
|
8168
|
+
const { getRect } = useHeatmapElementPosition({ iframeRef, wrapperRef, visualizer });
|
|
8169
|
+
const { handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({ iframeRef, getRect });
|
|
8170
|
+
useElementCalloutVisible({ visualRef, getRect, positionMode });
|
|
8109
8171
|
useHeatmapEffects({ isVisible });
|
|
8110
|
-
useRenderCount('HeatmapElements');
|
|
8111
8172
|
if (!isVisible)
|
|
8112
8173
|
return null;
|
|
8113
|
-
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:
|
|
8174
|
+
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: isHideTopRank }), jsx(ElementCalloutClicked, { visualRef: visualRef, positionMode: positionMode, getRect: getRect, isSecondary: isSecondary, containerRef: elementCalloutRef }), jsx(ElementCalloutHovered, { visualRef: visualRef, onClick: handleClick, isSecondary: isSecondary, positionMode: positionMode })] }));
|
|
8114
8175
|
};
|
|
8115
8176
|
|
|
8116
8177
|
const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
|
|
@@ -8127,7 +8188,7 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
|
|
|
8127
8188
|
// useRenderCount('VizElements');
|
|
8128
8189
|
if (!iframeRef.current)
|
|
8129
8190
|
return null;
|
|
8130
|
-
return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: dataInfo, isVisible: true, positionMode: DEFAULT_POSITION_MODE,
|
|
8191
|
+
return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: dataInfo, isVisible: true, positionMode: DEFAULT_POSITION_MODE, isHideTopRank: true, iframeDimensions: {
|
|
8131
8192
|
width: contentWidth,
|
|
8132
8193
|
position: 'absolute',
|
|
8133
8194
|
top: 0,
|
|
@@ -8572,4 +8633,4 @@ const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataIn
|
|
|
8572
8633
|
}
|
|
8573
8634
|
};
|
|
8574
8635
|
|
|
8575
|
-
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 };
|
|
8636
|
+
export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, ELM_CALLOUT_CONFIG, 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 };
|
|
@@ -14,6 +14,10 @@ export interface IViewportDimensions {
|
|
|
14
14
|
width: number;
|
|
15
15
|
height: number;
|
|
16
16
|
}
|
|
17
|
+
export interface IVisualDomViewport extends IViewportDimensions {
|
|
18
|
+
scrollTop: number;
|
|
19
|
+
scrollLeft: number;
|
|
20
|
+
}
|
|
17
21
|
export interface ICalloutRect {
|
|
18
22
|
width: number;
|
|
19
23
|
height: number;
|
|
@@ -40,6 +44,7 @@ export interface IPositionCandidate extends IPositionCandidateBase {
|
|
|
40
44
|
placement: ICalloutPlacement;
|
|
41
45
|
horizontalAlign: IHorizontalAlignment;
|
|
42
46
|
valid: boolean;
|
|
47
|
+
isVisibleInViewport?: boolean;
|
|
43
48
|
}
|
|
44
49
|
export interface IPositionCandidateOffset {
|
|
45
50
|
x: number;
|
|
@@ -48,6 +53,7 @@ export interface IPositionCandidateOffset {
|
|
|
48
53
|
export interface IPositionCandidateOption {
|
|
49
54
|
rectDimensions: IRectDimensions;
|
|
50
55
|
viewport: IViewportDimensions;
|
|
56
|
+
visualViewport?: IVisualDomViewport;
|
|
51
57
|
alignment: IHorizontalAlignment;
|
|
52
58
|
offset: IPositionCandidateOffset;
|
|
53
59
|
padding: number;
|
|
@@ -1 +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,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,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;
|
|
1
|
+
{"version":3,"file":"viz-elm-callout.d.ts","sourceRoot":"","sources":["../../src/types/viz-elm-callout.ts"],"names":[],"mappings":"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"}
|
package/dist/style.css
CHANGED
|
@@ -60,16 +60,21 @@
|
|
|
60
60
|
|
|
61
61
|
.heatmapElement {
|
|
62
62
|
position: absolute;
|
|
63
|
-
|
|
64
|
-
outline: 1px solid #0078d4;
|
|
63
|
+
|
|
65
64
|
transition: opacity 0.15s ease-out;
|
|
66
65
|
}
|
|
67
66
|
|
|
68
67
|
.heatmapElement--hovered {
|
|
69
68
|
cursor: pointer;
|
|
69
|
+
/* border: 2px solid white; */
|
|
70
|
+
outline: 2px dashed #005BD3;
|
|
70
71
|
animation: heatmap-element-fade-in 0.2s ease-out;
|
|
71
72
|
}
|
|
72
73
|
|
|
74
|
+
.heatmapElement--hide-outline {
|
|
75
|
+
outline: none !important;
|
|
76
|
+
}
|
|
77
|
+
|
|
73
78
|
.heatmapElement--clicked {
|
|
74
79
|
cursor: auto;
|
|
75
80
|
animation: heatmap-element-fade-in 0.2s ease-out;
|
|
@@ -166,4 +171,4 @@
|
|
|
166
171
|
}
|
|
167
172
|
}
|
|
168
173
|
|
|
169
|
-
/*# sourceMappingURL=data:application/json;base64,
|
|
174
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9zdHlsZXMvc3R5bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6InN0eWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qID09PT09PT09PT09PT09PT09IEdsb2JhbCBDU1MgPT09PT09PT09PT09PT09PT0gKi9cbi5neC1obS1kaXZpZGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogdmFyKC0tZ3gtaG0tYm9yZGVyLXdpZHRoLCAxcHgpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1neC1obS1ib3JkZXItY29sb3IsICNjY2MpO1xufVxuXG4uZ3gtaG0tYm9yZGVyLWlubGluZS1lbmQge1xuICBib3JkZXItaW5saW5lLWVuZC13aWR0aDogdmFyKC0tZ3gtaG0tYm9yZGVyLXdpZHRoLCAxcHgpO1xuICBib3JkZXItaW5saW5lLWVuZC1jb2xvcjogdmFyKC0tZ3gtaG0tYm9yZGVyLWNvbG9yLCAjY2NjKTtcbiAgYm9yZGVyLWlubGluZS1lbmQtc3R5bGU6IHNvbGlkO1xufVxuXG4uZ3gtaG0tYm9yZGVyLWJsb2NrLWVuZCB7XG4gIGJvcmRlci1ibG9jay1lbmQtd2lkdGg6IHZhcigtLWd4LWhtLWJvcmRlci13aWR0aCwgMXB4KTtcbiAgYm9yZGVyLWJsb2NrLWVuZC1jb2xvcjogdmFyKC0tZ3gtaG0tYm9yZGVyLWNvbG9yLCAjY2NjKTtcbiAgYm9yZGVyLWJsb2NrLWVuZC1zdHlsZTogc29saWQ7XG59XG5cbi5neC1obS1zaGFkb3cge1xuICBib3gtc2hhZG93OiAwcHggMHB4IDZweCAxcHggIzFhMWExYTMzO1xufVxuXG4vKiA9PT09PT09PT09PT09PT09PSBIZWF0bWFwIFdyYXBwZXIgQ1NTID09PT09PT09PT09PT09PT09ICovXG5cbi5neC1obS13cmFwcGVyIGlmcmFtZSB7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICAvKiBib3JkZXI6IDFweCBzb2xpZCAjQ0NDOyAqL1xuICBib3JkZXItcmFkaXVzOiA4cHg7XG4gIGJvcmRlci13aWR0aDogdmFyKC0tZ3gtaG0tYm9yZGVyLXdpZHRoLWlmcmFtZSwgMXB4KTtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1neC1obS1ib3JkZXItY29sb3IsICNjY2MpO1xuICBib3JkZXItc3R5bGU6IHNvbGlkO1xuICAvKiBib3gtc2hhZG93OiAwcHggMXB4IDBweCAwcHggIzFBMUExQTEyO1xuICBib3gtc2hhZG93OiAwcHggMXB4IDBweCAwcHggI0NDQ0NDQzgwIGluc2V0O1xuICBib3gtc2hhZG93OiAwcHggLTFweCAwcHggMHB4ICMwMDAwMDAyQiBpbnNldDtcbiAgYm94LXNoYWRvdzogLTFweCAwcHggMHB4IDBweCAjMDAwMDAwMjEgaW5zZXQ7XG4gIGJveC1zaGFkb3c6IDFweCAwcHggMHB4IDBweCAjMDAwMDAwMjEgaW5zZXQ7ICovXG59XG5cbi5neC1obS13cmFwcGVyIC5neC1obS1lbGVtZW50cyB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogMjtcbn1cblxuLmd4LWhtLXJhbmstYmFkZ2Uge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHdpZHRoOiAyOHB4O1xuICBoZWlnaHQ6IDI4cHg7XG4gIGJhY2tncm91bmQ6ICMwMDc4ZDQ7XG4gIGNvbG9yOiB3aGl0ZTtcbiAgYm9yZGVyOiAxcHggc29saWQgI2ZmZmZmZjtcbiAgYm9yZGVyLXJhZGl1czogMzJweDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMS4ycHggMy42cHggcmdiYSgwLCAwLCAwLCAwLjEpKTtcbiAgY3Vyc29yOiBkZWZhdWx0O1xufVxuXG4uaGVhdG1hcEVsZW1lbnQge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG5cbiAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjE1cyBlYXNlLW91dDtcbn1cblxuLmhlYXRtYXBFbGVtZW50LS1ob3ZlcmVkIHtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICAvKiBib3JkZXI6IDJweCBzb2xpZCB3aGl0ZTsgKi9cbiAgb3V0bGluZTogMnB4IGRhc2hlZCAjMDA1QkQzO1xuICBhbmltYXRpb246IGhlYXRtYXAtZWxlbWVudC1mYWRlLWluIDAuMnMgZWFzZS1vdXQ7XG59XG5cbi5oZWF0bWFwRWxlbWVudC0taGlkZS1vdXRsaW5lIHtcbiAgb3V0bGluZTogbm9uZSAhaW1wb3J0YW50O1xufVxuXG4uaGVhdG1hcEVsZW1lbnQtLWNsaWNrZWQge1xuICBjdXJzb3I6IGF1dG87XG4gIGFuaW1hdGlvbjogaGVhdG1hcC1lbGVtZW50LWZhZGUtaW4gMC4ycyBlYXNlLW91dDtcbn1cblxuQGtleWZyYW1lcyBoZWF0bWFwLWVsZW1lbnQtZmFkZS1pbiB7XG4gIGZyb20ge1xuICAgIG9wYWNpdHk6IDA7XG4gIH1cblxuICB0byB7XG4gICAgb3BhY2l0eTogMTtcbiAgfVxufVxuXG4vKiA9PT09PT09PT09PT09PT09PSBDYWxsb3V0IENTUyA9PT09PT09PT09PT09PT09PSAqL1xuXG4uY2xhcml0eS1jYWxsb3V0IHtcbiAgLyogYm94LXNoYWRvdzogMCA0cHggMjBweCByZ2JhKDAsIDAsIDAsIDAuMTUpOyAqL1xuICBtaW4td2lkdGg6IDIwMHB4O1xuICBtYXgtd2lkdGg6IDI4MHB4O1xuICB3aWR0aDogMjMwcHg7XG4gIGhlaWdodDogMjYzcHg7XG4gIGFuaW1hdGlvbjogY2xhcml0eS1jYWxsb3V0LWZhZGUtaW4gMC4ycyBlYXNlLW91dDtcbiAgcG9pbnRlci1ldmVudHM6IGF1dG87XG4gIC8qIG92ZXJmbG93OiBoaWRkZW47ICovXG59XG5cbi5jbGFyaXR5LWNhbGxvdXQtLW1vdXNlLWZvbGxvdyB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogMjtcbn1cblxuQGtleWZyYW1lcyBjbGFyaXR5LWNhbGxvdXQtZmFkZS1pbiB7XG4gIGZyb20ge1xuICAgIG9wYWNpdHk6IDA7XG4gICAgLyogdHJhbnNmb3JtOiBzY2FsZSgwLjk1KTsgKi9cbiAgfVxuXG4gIHRvIHtcbiAgICBvcGFjaXR5OiAxO1xuICAgIC8qIHRyYW5zZm9ybTogc2NhbGUoMSk7ICovXG4gIH1cbn1cblxuLmNsYXJpdHktY2FsbG91dF9fYXJyb3cge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHdpZHRoOiAxNnB4O1xuICBoZWlnaHQ6IDE2cHg7XG4gIGJhY2tncm91bmQ6IHdoaXRlO1xuICB0cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7XG59XG5cbi8qID09PT09PT09PT09PT09PT09IExvYWRpbmcgQ1NTID09PT09PT09PT09PT09PT09ICovXG4uZ3gtaG0tbG9hZGluZyB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICByaWdodDogMDtcbiAgYm90dG9tOiAwO1xuICBiYWNrZ3JvdW5kOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuOTUpO1xuICBiYWNrZHJvcC1maWx0ZXI6IGJsdXIoMnB4KTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHotaW5kZXg6IDEwO1xuICBib3JkZXItcmFkaXVzOiA4cHg7XG59XG5cbi5neC1obS1sb2FkaW5nLS1zcGlubmVyIHtcbiAgd2lkdGg6IDQ4cHg7XG4gIGhlaWdodDogNDhweDtcbiAgYm9yZGVyOiA0cHggc29saWQgI2YzZjNmMztcbiAgYm9yZGVyLXRvcDogNHB4IHNvbGlkICM0ZjQ2ZTU7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgYW5pbWF0aW9uOiBzcGluIDFzIGxpbmVhciBpbmZpbml0ZTtcbn1cblxuLmd4LWhtLWxvYWRpbmctLXRleHQge1xuICBtYXJnaW4tdG9wOiAxNnB4O1xuICBmb250LXNpemU6IDE0cHg7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG4gIGNvbG9yOiAjNjY2O1xufVxuXG5Aa2V5ZnJhbWVzIHNwaW4ge1xuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgfVxuXG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICB9XG59XG4iXX0= */
|
|
@@ -2,6 +2,7 @@ import type { ElementInfo } from '../../types';
|
|
|
2
2
|
export interface ElementOverlayProps {
|
|
3
3
|
type: 'hovered' | 'clicked';
|
|
4
4
|
element: ElementInfo | null;
|
|
5
|
+
hideOutline?: boolean;
|
|
5
6
|
elementId: string;
|
|
6
7
|
containerRef?: React.RefObject<HTMLDivElement>;
|
|
7
8
|
onClick?: (event?: React.MouseEvent<HTMLDivElement>) => void;
|
|
@@ -1 +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;AAU/C,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,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;
|
|
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;AAU/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"}
|
|
@@ -5,7 +5,7 @@ interface HeatmapElementsProps {
|
|
|
5
5
|
visualizer?: WebVisualizer;
|
|
6
6
|
isVisible?: boolean;
|
|
7
7
|
iframeDimensions?: React.CSSProperties;
|
|
8
|
-
|
|
8
|
+
isHideTopRank?: boolean;
|
|
9
9
|
isSecondary?: boolean;
|
|
10
10
|
positionMode?: ICalloutPositionMode;
|
|
11
11
|
iframeRef: React.RefObject<HTMLIFrameElement>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeatmapElements.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/HeatmapElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"HeatmapElements.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/HeatmapElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAe7D,UAAU,oBAAoB;IAC5B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgD1D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoveredElementOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/HoveredElementOverlay.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"HoveredElementOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/HoveredElementOverlay.tsx"],"names":[],"mappings":"AAOA,UAAU,0BAA0B;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7E;AA+BD,eAAO,MAAM,qBAAqB,kEAAuC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RankBadge.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/RankBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"RankBadge.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/RankBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAO/C,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AA0BD,eAAO,MAAM,SAAS,sDAA2B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"elm-callout.d.ts","sourceRoot":"","sources":["../../src/configs/elm-callout.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/configs/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/configs/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import type { ElementRect } from '../../types';
|
|
1
|
+
import type { ElementRect, IVisualDomViewport } from '../../types';
|
|
2
2
|
export declare function isElementInViewport(elementRect: ElementRect, visualRef: React.RefObject<HTMLDivElement>, scale: number): boolean;
|
|
3
|
+
export declare function isElementRectInViewport(elementRect: ElementRect, visualRect: IVisualDomViewport, scale: number): boolean;
|
|
3
4
|
//# sourceMappingURL=element.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../../src/helpers/viewport/element.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../../src/helpers/viewport/element.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEnE,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAC1C,KAAK,EAAE,MAAM,GACZ,OAAO,CAqBT;AAED,wBAAgB,uBAAuB,CACrC,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,kBAAkB,EAC9B,KAAK,EAAE,MAAM,GACZ,OAAO,CAuBT"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type { IRectDimensions, IViewportDimensions } from '../../types';
|
|
2
|
-
export declare const
|
|
1
|
+
import type { IRectDimensions, IViewportDimensions, IVisualDomViewport } from '../../types';
|
|
2
|
+
export declare const getContainerViewport: (containerElm?: HTMLElement | null, _scale?: number) => IViewportDimensions;
|
|
3
|
+
export declare const getVisualDomViewport: (visualDomElm?: HTMLElement | null, scale?: number) => IVisualDomViewport;
|
|
3
4
|
interface IElementDimensionsOptions {
|
|
4
5
|
targetElm: Element;
|
|
5
6
|
calloutElm: HTMLElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/dimensions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,eAAe,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/dimensions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,eAAe,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAI1G,eAAO,MAAM,oBAAoB,GAAI,eAAe,WAAW,GAAG,IAAI,EAAE,SAAS,MAAM,KAAG,mBAYzF,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,eAAe,WAAW,GAAG,IAAI,EAAE,cAAS,KAAG,kBAkBnF,CAAC;AAEF,UAAU,yBAAyB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,WAAW,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,WAAW,CAAC;CAC3B;AACD,eAAO,MAAM,oBAAoB,GAAI,SAAS,yBAAyB,KAAG,eAqCzE,CAAC"}
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -1 +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,
|
|
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"}
|
|
@@ -1 +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,EAK1B,MAAM,aAAa,CAAC;AAkErB,eAAO,MAAM,mBAAmB,GAAI,SAAS,yBAAyB,
|
|
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,EAK1B,MAAM,aAAa,CAAC;AAkErB,eAAO,MAAM,mBAAmB,GAAI,SAAS,yBAAyB,eAkDrE,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,OAAO,iCAAiC,SAiEnF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeatmapEffects.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useHeatmapEffects.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useHeatmapEffects.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useHeatmapEffects.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAI,eAAe;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,SAqBvE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHoveredElement.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useHoveredElement.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useHoveredElement.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useHoveredElement.ts"],"names":[],"mappings":"AAUA,UAAU,MAAM;IACd,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,GAAI,wBAAwB,MAAM;uEA+CpD,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;;0BAwB/B,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,MAAM;CA4B3D,CAAC;AAiBF,eAAO,MAAM,6BAA6B,GACxC,SAAS,MAAM,EACf,SAAS,MAAM,EACf,YAAY,OAAO,EACnB,OAAO,MAAM,KACZ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAUxB,CAAC"}
|