@gemx-dev/heatmap-react 3.5.70 → 3.5.71

package/dist/esm/components/VizElement/ElementCallout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementCallout.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCallout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAoB,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAiBvF,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgDxD,CAAC"}
+{"version":3,"file":"ElementCallout.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCallout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAoB,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAiBvF,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkDxD,CAAC"}

package/dist/esm/hooks/view-context/useHeatmapSetting.d.ts

@@ -1,20 +1,20 @@
-import type { IClickMode, IClickRankType, IClickType, IDeviceType, IHeatmapType, IScrollType } from '../../types';
+import type { EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapType, EScrollType } from '../../types';
 interface IHeatmapSettingState {
     isRendering: boolean;
-    rankedBy: IClickRankType | undefined;
-    deviceType: IDeviceType | undefined;
-    clickType: IClickType | undefined;
-    clickMode: IClickMode | undefined;
-    scrollType: IScrollType | undefined;
-    heatmapType: IHeatmapType | undefined;
+    rankedBy: EClickRankType | undefined;
+    deviceType: EDeviceType | undefined;
+    clickType: EClickType | undefined;
+    clickMode: EClickMode | undefined;
+    scrollType: EScrollType | undefined;
+    heatmapType: EHeatmapType | undefined;
 }
 interface IHeatmapSettingActions {
-    setRankedBy: (rankedBy: IClickRankType) => void;
-    setDeviceType: (deviceType: IDeviceType) => void;
-    setClickType: (clickType: IClickType) => void;
-    setClickMode: (clickMode: IClickMode) => void;
-    setScrollType: (scrollType: IScrollType) => void;
-    setHeatmapType: (heatmapType: IHeatmapType) => void;
+    setRankedBy: (rankedBy: EClickRankType) => void;
+    setDeviceType: (deviceType: EDeviceType) => void;
+    setClickType: (clickType: EClickType) => void;
+    setClickMode: (clickMode: EClickMode) => void;
+    setScrollType: (scrollType: EScrollType) => void;
+    setHeatmapType: (heatmapType: EHeatmapType) => void;
     setIsRendering: (isRendering: boolean) => void;
     clearView: (viewId: string) => void;
 }

package/dist/esm/hooks/viz-render/useReplayRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReplayRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useReplayRender.ts"],"names":[],"mappings":"AAUA,UAAU,sBAAsB;IAC9B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,QAAO,sBAiJlC,CAAC"}
+{"version":3,"file":"useReplayRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useReplayRender.ts"],"names":[],"mappings":"AASA,UAAU,sBAAsB;IAC9B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,QAAO,sBAgJlC,CAAC"}

package/dist/esm/index.js

@@ -149,53 +149,53 @@ function useDebounceCallback(callback, delay) {
     }, [delay]);
 }
 
-var IDeviceType;
-(function (IDeviceType) {
-    IDeviceType["Desktop"] = "DESKTOP";
-    IDeviceType["Mobile"] = "MOBILE";
-    IDeviceType["Tablet"] = "TABLET";
-})(IDeviceType || (IDeviceType = {}));
-var IHeatmapType;
-(function (IHeatmapType) {
-    IHeatmapType["Click"] = "click";
-    IHeatmapType["Scroll"] = "scroll";
-})(IHeatmapType || (IHeatmapType = {}));
-var IClickType;
-(function (IClickType) {
+var EDeviceType;
+(function (EDeviceType) {
+    EDeviceType["Desktop"] = "DESKTOP";
+    EDeviceType["Mobile"] = "MOBILE";
+    EDeviceType["Tablet"] = "TABLET";
+})(EDeviceType || (EDeviceType = {}));
+var EHeatmapType;
+(function (EHeatmapType) {
+    EHeatmapType["Click"] = "click";
+    EHeatmapType["Scroll"] = "scroll";
+})(EHeatmapType || (EHeatmapType = {}));
+var EClickType;
+(function (EClickType) {
     /** Return all clicks (default) */
-    IClickType["All"] = "ALL";
+    EClickType["All"] = "ALL";
     /** Rapid clicks in a small area, indicating user frustration */
-    IClickType["Rage"] = "RAGE";
+    EClickType["Rage"] = "RAGE";
     /** Clicks with no effect (no navigation, no state change) */
-    IClickType["Dead"] = "DEAD";
+    EClickType["Dead"] = "DEAD";
     /** Clicks followed by JavaScript errors */
-    IClickType["Error"] = "ERROR";
+    EClickType["Error"] = "ERROR";
     /** The first click of the session */
-    IClickType["First"] = "FIRST";
+    EClickType["First"] = "FIRST";
     /** The last click of the session */
-    IClickType["Last"] = "LAST";
+    EClickType["Last"] = "LAST";
     /** Normal click with no special behavior (fallback type) */
-    IClickType["Standard"] = "STANDARD";
-})(IClickType || (IClickType = {}));
-var IClickRankType;
-(function (IClickRankType) {
-    IClickRankType["MostClicks"] = "most-clicks";
-    IClickRankType["Revenue"] = "revenue";
-    IClickRankType["ConversionRate"] = "conversion-rate";
-    IClickRankType["RevenuePerClick"] = "revenue-per-click";
-    IClickRankType["RevenuePerSession"] = "revenue-per-session";
-})(IClickRankType || (IClickRankType = {}));
-var IClickMode;
-(function (IClickMode) {
-    IClickMode["Default"] = "default";
-    IClickMode["Area"] = "click-area";
-})(IClickMode || (IClickMode = {}));
-var IScrollType;
-(function (IScrollType) {
-    IScrollType["Depth"] = "scroll-depth";
-    IScrollType["Attention"] = "attention-scroll";
-    IScrollType["Revenue"] = "revenue-scroll";
-})(IScrollType || (IScrollType = {}));
+    EClickType["Standard"] = "STANDARD";
+})(EClickType || (EClickType = {}));
+var EClickRankType;
+(function (EClickRankType) {
+    EClickRankType["MostClicks"] = "most-clicks";
+    EClickRankType["Revenue"] = "revenue";
+    EClickRankType["ConversionRate"] = "conversion-rate";
+    EClickRankType["RevenuePerClick"] = "revenue-per-click";
+    EClickRankType["RevenuePerSession"] = "revenue-per-session";
+})(EClickRankType || (EClickRankType = {}));
+var EClickMode;
+(function (EClickMode) {
+    EClickMode["Default"] = "default";
+    EClickMode["Area"] = "click-area";
+})(EClickMode || (EClickMode = {}));
+var EScrollType;
+(function (EScrollType) {
+    EScrollType["Depth"] = "scroll-depth";
+    EScrollType["Attention"] = "attention-scroll";
+    EScrollType["Revenue"] = "revenue-scroll";
+})(EScrollType || (EScrollType = {}));
 
 const ViewIdContext = createContext(undefined);
 const useViewIdContext = () => {
@@ -307,7 +307,7 @@ const useHeatmapConfigStore = create()((set) => {
     return {
         mode: 'single',
         sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
-        clickMode: IClickMode.Default,
+        clickMode: EClickMode.Default,
         isRendering: true,
         setMode: (mode) => set({ mode }),
         resetMode: () => set({ mode: 'single' }),
@@ -416,12 +416,12 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
 const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
     return {
         isRendering: new Map([[DEFAULT_VIEW_ID, false]]),
-        rankedBy: new Map([[DEFAULT_VIEW_ID, IClickRankType.MostClicks]]),
-        deviceType: new Map([[DEFAULT_VIEW_ID, IDeviceType.Desktop]]),
-        clickType: new Map([[DEFAULT_VIEW_ID, IClickType.All]]),
-        clickMode: new Map([[DEFAULT_VIEW_ID, IClickMode.Default]]),
-        scrollType: new Map([[DEFAULT_VIEW_ID, IScrollType.Depth]]),
-        heatmapType: new Map([[DEFAULT_VIEW_ID, IHeatmapType.Click]]),
+        rankedBy: new Map([[DEFAULT_VIEW_ID, EClickRankType.MostClicks]]),
+        deviceType: new Map([[DEFAULT_VIEW_ID, EDeviceType.Desktop]]),
+        clickType: new Map([[DEFAULT_VIEW_ID, EClickType.All]]),
+        clickMode: new Map([[DEFAULT_VIEW_ID, EClickMode.Default]]),
+        scrollType: new Map([[DEFAULT_VIEW_ID, EScrollType.Depth]]),
+        heatmapType: new Map([[DEFAULT_VIEW_ID, EHeatmapType.Click]]),
         setIsRendering: (isRendering, viewId = DEFAULT_VIEW_ID) => set((prev) => {
             const newIsRendering = new Map(prev.isRendering);
             newIsRendering.set(viewId, isRendering);
@@ -503,12 +503,12 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
         }),
         resetAll: () => set({
             isRendering: new Map([[DEFAULT_VIEW_ID, false]]),
-            rankedBy: new Map([[DEFAULT_VIEW_ID, IClickRankType.MostClicks]]),
-            deviceType: new Map([[DEFAULT_VIEW_ID, IDeviceType.Desktop]]),
-            clickType: new Map([[DEFAULT_VIEW_ID, IClickType.All]]),
-            clickMode: new Map([[DEFAULT_VIEW_ID, IClickMode.Default]]),
-            scrollType: new Map([[DEFAULT_VIEW_ID, IScrollType.Depth]]),
-            heatmapType: new Map([[DEFAULT_VIEW_ID, IHeatmapType.Click]]),
+            rankedBy: new Map([[DEFAULT_VIEW_ID, EClickRankType.MostClicks]]),
+            deviceType: new Map([[DEFAULT_VIEW_ID, EDeviceType.Desktop]]),
+            clickType: new Map([[DEFAULT_VIEW_ID, EClickType.All]]),
+            clickMode: new Map([[DEFAULT_VIEW_ID, EClickMode.Default]]),
+            scrollType: new Map([[DEFAULT_VIEW_ID, EScrollType.Depth]]),
+            heatmapType: new Map([[DEFAULT_VIEW_ID, EHeatmapType.Click]]),
         }),
     };
 }));
@@ -1339,11 +1339,11 @@ const useHeatmapWidthByDevice = () => {
         if (!deviceType)
             return 1440;
         switch (deviceType) {
-            case IDeviceType.Desktop:
+            case EDeviceType.Desktop:
                 return 1440;
-            case IDeviceType.Tablet:
+            case EDeviceType.Tablet:
                 return 768;
-            case IDeviceType.Mobile:
+            case EDeviceType.Mobile:
                 return 375;
         }
     }
@@ -4449,15 +4449,15 @@ const useHeatmapCanvas = () => {
     const { start: startScrollmap } = useScrollmap();
     useEffect(() => {
         switch (heatmapType) {
-            case IHeatmapType.Click:
-                if (clickMode === IClickMode.Default) {
+            case EHeatmapType.Click:
+                if (clickMode === EClickMode.Default) {
                     startClickmap();
                 }
                 else {
                     startAreaClickmap();
                 }
                 break;
-            case IHeatmapType.Scroll:
+            case EHeatmapType.Scroll:
                 startScrollmap();
                 break;
         }
@@ -6456,7 +6456,8 @@ function sortEvents(a, b) {
 }
 
 const useReplayRender = () => {
-    const setWidth = useHeatmapConfigStore((state) => state.setWidth);
+    const setIframeHeight = useHeatmapVizRect((s) => s.setIframeHeight);
+    const setIsRenderViz = useHeatmapViz((s) => s.setIsRenderViz);
     const { data } = useHeatmapData();
     const visualizerRef = useRef(null);
     const iframeRef = useRef(null);
@@ -6474,15 +6475,16 @@ const useReplayRender = () => {
         const mobile = isMobileDevice(userAgent);
         visualizer.setup(iframe.contentWindow, {
             version: envelope.version,
-            onresize: (width) => {
-                setWidth(width);
+            onresize: (height) => {
+                height && setIframeHeight(height);
+                setIsRenderViz(true);
             },
             mobile,
             vNext: true,
             locale: 'en-us',
         });
         return visualizer;
-    }, [setWidth]);
+    }, []);
     // Animation loop for replay
     const replayLoop = useCallback(() => {
         if (!isPlayingRef.current)
@@ -8319,13 +8321,13 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
 const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
     const clickMode = useHeatmapSetting((state) => state.clickMode);
     const heatmapType = useHeatmapSetting((state) => state.heatmapType);
-    const isClickType = heatmapType === IHeatmapType.Click;
+    const isClickType = heatmapType === EHeatmapType.Click;
     if (!isClickType)
         return null;
     switch (clickMode) {
-        case IClickMode.Default:
+        case EClickMode.Default:
             return jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef });
-        case IClickMode.Area:
+        case EClickMode.Area:
             return (jsx(VizAreaClick, { iframeRef: iframeRef, visualRef: visualRef, autoCreateTopN: 10, onAreaClick: (_area) => {
                     // console.log('area clicked', area);
                 } }));
@@ -8335,7 +8337,7 @@ const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
 const ScrollMapMinimap = ({ zones, maxUsers }) => {
     const scrollType = useHeatmapSetting((s) => s.scrollType);
     const showMinimap = useHeatmapScroll((s) => s.showMinimap);
-    const isScrollType = [IScrollType.Attention].includes(scrollType ?? IScrollType.Depth);
+    const isScrollType = [EScrollType.Attention].includes(scrollType ?? EScrollType.Depth);
     if (!showMinimap || !isScrollType)
         return null;
     return (jsx("div", { style: {
@@ -8506,7 +8508,7 @@ const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
         { percent: 25, label: '25%', color: '#EF4444' },
         { percent: 5, label: '5%', color: '#8B5CF6' },
     ];
-    const isScrollDepth = scrollType === IScrollType.Depth;
+    const isScrollDepth = scrollType === EScrollType.Depth;
     if (!isScrollDepth)
         return null;
     return (jsx(Fragment, { children: boundaries.map((boundary) => {
@@ -8558,12 +8560,12 @@ const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
         }) }));
 };
 
-const SCROLL_TYPES = [IHeatmapType.Scroll];
+const SCROLL_TYPES = [EHeatmapType.Scroll];
 const VizScrollMap = ({ iframeRef, wrapperRef }) => {
     const heatmapType = useHeatmapSetting((s) => s.heatmapType);
     const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
     // useRenderCount('VizScrollMap');
-    const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType ?? IHeatmapType.Click);
+    const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType ?? EHeatmapType.Click);
     if (!iframeHeight || !isHeatmapScroll)
         return null;
     return (jsxs("div", { style: {
@@ -8753,4 +8755,4 @@ const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataIn
     }
 };
 
-export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, ELM_CALLOUT_CONFIG, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickMode, IClickRankType, IClickType, IDeviceType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, 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, useHeatmapSetting, useHeatmapViz, useHeatmapVizRect, useHeatmapWidthByDevice, 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, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, 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, useHeatmapSetting, useHeatmapViz, useHeatmapVizRect, useHeatmapWidthByDevice, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };

package/dist/esm/index.mjs

@@ -149,53 +149,53 @@ function useDebounceCallback(callback, delay) {
     }, [delay]);
 }
 
-var IDeviceType;
-(function (IDeviceType) {
-    IDeviceType["Desktop"] = "DESKTOP";
-    IDeviceType["Mobile"] = "MOBILE";
-    IDeviceType["Tablet"] = "TABLET";
-})(IDeviceType || (IDeviceType = {}));
-var IHeatmapType;
-(function (IHeatmapType) {
-    IHeatmapType["Click"] = "click";
-    IHeatmapType["Scroll"] = "scroll";
-})(IHeatmapType || (IHeatmapType = {}));
-var IClickType;
-(function (IClickType) {
+var EDeviceType;
+(function (EDeviceType) {
+    EDeviceType["Desktop"] = "DESKTOP";
+    EDeviceType["Mobile"] = "MOBILE";
+    EDeviceType["Tablet"] = "TABLET";
+})(EDeviceType || (EDeviceType = {}));
+var EHeatmapType;
+(function (EHeatmapType) {
+    EHeatmapType["Click"] = "click";
+    EHeatmapType["Scroll"] = "scroll";
+})(EHeatmapType || (EHeatmapType = {}));
+var EClickType;
+(function (EClickType) {
     /** Return all clicks (default) */
-    IClickType["All"] = "ALL";
+    EClickType["All"] = "ALL";
     /** Rapid clicks in a small area, indicating user frustration */
-    IClickType["Rage"] = "RAGE";
+    EClickType["Rage"] = "RAGE";
     /** Clicks with no effect (no navigation, no state change) */
-    IClickType["Dead"] = "DEAD";
+    EClickType["Dead"] = "DEAD";
     /** Clicks followed by JavaScript errors */
-    IClickType["Error"] = "ERROR";
+    EClickType["Error"] = "ERROR";
     /** The first click of the session */
-    IClickType["First"] = "FIRST";
+    EClickType["First"] = "FIRST";
     /** The last click of the session */
-    IClickType["Last"] = "LAST";
+    EClickType["Last"] = "LAST";
     /** Normal click with no special behavior (fallback type) */
-    IClickType["Standard"] = "STANDARD";
-})(IClickType || (IClickType = {}));
-var IClickRankType;
-(function (IClickRankType) {
-    IClickRankType["MostClicks"] = "most-clicks";
-    IClickRankType["Revenue"] = "revenue";
-    IClickRankType["ConversionRate"] = "conversion-rate";
-    IClickRankType["RevenuePerClick"] = "revenue-per-click";
-    IClickRankType["RevenuePerSession"] = "revenue-per-session";
-})(IClickRankType || (IClickRankType = {}));
-var IClickMode;
-(function (IClickMode) {
-    IClickMode["Default"] = "default";
-    IClickMode["Area"] = "click-area";
-})(IClickMode || (IClickMode = {}));
-var IScrollType;
-(function (IScrollType) {
-    IScrollType["Depth"] = "scroll-depth";
-    IScrollType["Attention"] = "attention-scroll";
-    IScrollType["Revenue"] = "revenue-scroll";
-})(IScrollType || (IScrollType = {}));
+    EClickType["Standard"] = "STANDARD";
+})(EClickType || (EClickType = {}));
+var EClickRankType;
+(function (EClickRankType) {
+    EClickRankType["MostClicks"] = "most-clicks";
+    EClickRankType["Revenue"] = "revenue";
+    EClickRankType["ConversionRate"] = "conversion-rate";
+    EClickRankType["RevenuePerClick"] = "revenue-per-click";
+    EClickRankType["RevenuePerSession"] = "revenue-per-session";
+})(EClickRankType || (EClickRankType = {}));
+var EClickMode;
+(function (EClickMode) {
+    EClickMode["Default"] = "default";
+    EClickMode["Area"] = "click-area";
+})(EClickMode || (EClickMode = {}));
+var EScrollType;
+(function (EScrollType) {
+    EScrollType["Depth"] = "scroll-depth";
+    EScrollType["Attention"] = "attention-scroll";
+    EScrollType["Revenue"] = "revenue-scroll";
+})(EScrollType || (EScrollType = {}));
 
 const ViewIdContext = createContext(undefined);
 const useViewIdContext = () => {
@@ -307,7 +307,7 @@ const useHeatmapConfigStore = create()((set) => {
     return {
         mode: 'single',
         sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
-        clickMode: IClickMode.Default,
+        clickMode: EClickMode.Default,
         isRendering: true,
         setMode: (mode) => set({ mode }),
         resetMode: () => set({ mode: 'single' }),
@@ -416,12 +416,12 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
 const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
     return {
         isRendering: new Map([[DEFAULT_VIEW_ID, false]]),
-        rankedBy: new Map([[DEFAULT_VIEW_ID, IClickRankType.MostClicks]]),
-        deviceType: new Map([[DEFAULT_VIEW_ID, IDeviceType.Desktop]]),
-        clickType: new Map([[DEFAULT_VIEW_ID, IClickType.All]]),
-        clickMode: new Map([[DEFAULT_VIEW_ID, IClickMode.Default]]),
-        scrollType: new Map([[DEFAULT_VIEW_ID, IScrollType.Depth]]),
-        heatmapType: new Map([[DEFAULT_VIEW_ID, IHeatmapType.Click]]),
+        rankedBy: new Map([[DEFAULT_VIEW_ID, EClickRankType.MostClicks]]),
+        deviceType: new Map([[DEFAULT_VIEW_ID, EDeviceType.Desktop]]),
+        clickType: new Map([[DEFAULT_VIEW_ID, EClickType.All]]),
+        clickMode: new Map([[DEFAULT_VIEW_ID, EClickMode.Default]]),
+        scrollType: new Map([[DEFAULT_VIEW_ID, EScrollType.Depth]]),
+        heatmapType: new Map([[DEFAULT_VIEW_ID, EHeatmapType.Click]]),
         setIsRendering: (isRendering, viewId = DEFAULT_VIEW_ID) => set((prev) => {
             const newIsRendering = new Map(prev.isRendering);
             newIsRendering.set(viewId, isRendering);
@@ -503,12 +503,12 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
         }),
         resetAll: () => set({
             isRendering: new Map([[DEFAULT_VIEW_ID, false]]),
-            rankedBy: new Map([[DEFAULT_VIEW_ID, IClickRankType.MostClicks]]),
-            deviceType: new Map([[DEFAULT_VIEW_ID, IDeviceType.Desktop]]),
-            clickType: new Map([[DEFAULT_VIEW_ID, IClickType.All]]),
-            clickMode: new Map([[DEFAULT_VIEW_ID, IClickMode.Default]]),
-            scrollType: new Map([[DEFAULT_VIEW_ID, IScrollType.Depth]]),
-            heatmapType: new Map([[DEFAULT_VIEW_ID, IHeatmapType.Click]]),
+            rankedBy: new Map([[DEFAULT_VIEW_ID, EClickRankType.MostClicks]]),
+            deviceType: new Map([[DEFAULT_VIEW_ID, EDeviceType.Desktop]]),
+            clickType: new Map([[DEFAULT_VIEW_ID, EClickType.All]]),
+            clickMode: new Map([[DEFAULT_VIEW_ID, EClickMode.Default]]),
+            scrollType: new Map([[DEFAULT_VIEW_ID, EScrollType.Depth]]),
+            heatmapType: new Map([[DEFAULT_VIEW_ID, EHeatmapType.Click]]),
         }),
     };
 }));
@@ -1339,11 +1339,11 @@ const useHeatmapWidthByDevice = () => {
         if (!deviceType)
             return 1440;
         switch (deviceType) {
-            case IDeviceType.Desktop:
+            case EDeviceType.Desktop:
                 return 1440;
-            case IDeviceType.Tablet:
+            case EDeviceType.Tablet:
                 return 768;
-            case IDeviceType.Mobile:
+            case EDeviceType.Mobile:
                 return 375;
         }
     }
@@ -4449,15 +4449,15 @@ const useHeatmapCanvas = () => {
     const { start: startScrollmap } = useScrollmap();
     useEffect(() => {
         switch (heatmapType) {
-            case IHeatmapType.Click:
-                if (clickMode === IClickMode.Default) {
+            case EHeatmapType.Click:
+                if (clickMode === EClickMode.Default) {
                     startClickmap();
                 }
                 else {
                     startAreaClickmap();
                 }
                 break;
-            case IHeatmapType.Scroll:
+            case EHeatmapType.Scroll:
                 startScrollmap();
                 break;
         }
@@ -6456,7 +6456,8 @@ function sortEvents(a, b) {
 }
 
 const useReplayRender = () => {
-    const setWidth = useHeatmapConfigStore((state) => state.setWidth);
+    const setIframeHeight = useHeatmapVizRect((s) => s.setIframeHeight);
+    const setIsRenderViz = useHeatmapViz((s) => s.setIsRenderViz);
     const { data } = useHeatmapData();
     const visualizerRef = useRef(null);
     const iframeRef = useRef(null);
@@ -6474,15 +6475,16 @@ const useReplayRender = () => {
         const mobile = isMobileDevice(userAgent);
         visualizer.setup(iframe.contentWindow, {
             version: envelope.version,
-            onresize: (width) => {
-                setWidth(width);
+            onresize: (height) => {
+                height && setIframeHeight(height);
+                setIsRenderViz(true);
             },
             mobile,
             vNext: true,
             locale: 'en-us',
         });
         return visualizer;
-    }, [setWidth]);
+    }, []);
     // Animation loop for replay
     const replayLoop = useCallback(() => {
         if (!isPlayingRef.current)
@@ -8319,13 +8321,13 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
 const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
     const clickMode = useHeatmapSetting((state) => state.clickMode);
     const heatmapType = useHeatmapSetting((state) => state.heatmapType);
-    const isClickType = heatmapType === IHeatmapType.Click;
+    const isClickType = heatmapType === EHeatmapType.Click;
     if (!isClickType)
         return null;
     switch (clickMode) {
-        case IClickMode.Default:
+        case EClickMode.Default:
             return jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef });
-        case IClickMode.Area:
+        case EClickMode.Area:
             return (jsx(VizAreaClick, { iframeRef: iframeRef, visualRef: visualRef, autoCreateTopN: 10, onAreaClick: (_area) => {
                     // console.log('area clicked', area);
                 } }));
@@ -8335,7 +8337,7 @@ const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
 const ScrollMapMinimap = ({ zones, maxUsers }) => {
     const scrollType = useHeatmapSetting((s) => s.scrollType);
     const showMinimap = useHeatmapScroll((s) => s.showMinimap);
-    const isScrollType = [IScrollType.Attention].includes(scrollType ?? IScrollType.Depth);
+    const isScrollType = [EScrollType.Attention].includes(scrollType ?? EScrollType.Depth);
     if (!showMinimap || !isScrollType)
         return null;
     return (jsx("div", { style: {
@@ -8506,7 +8508,7 @@ const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
         { percent: 25, label: '25%', color: '#EF4444' },
         { percent: 5, label: '5%', color: '#8B5CF6' },
     ];
-    const isScrollDepth = scrollType === IScrollType.Depth;
+    const isScrollDepth = scrollType === EScrollType.Depth;
     if (!isScrollDepth)
         return null;
     return (jsx(Fragment, { children: boundaries.map((boundary) => {
@@ -8558,12 +8560,12 @@ const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
         }) }));
 };
 
-const SCROLL_TYPES = [IHeatmapType.Scroll];
+const SCROLL_TYPES = [EHeatmapType.Scroll];
 const VizScrollMap = ({ iframeRef, wrapperRef }) => {
     const heatmapType = useHeatmapSetting((s) => s.heatmapType);
     const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
     // useRenderCount('VizScrollMap');
-    const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType ?? IHeatmapType.Click);
+    const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType ?? EHeatmapType.Click);
     if (!iframeHeight || !isHeatmapScroll)
         return null;
     return (jsxs("div", { style: {
@@ -8753,4 +8755,4 @@ const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataIn
     }
 };
 
-export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, ELM_CALLOUT_CONFIG, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickMode, IClickRankType, IClickType, IDeviceType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, 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, useHeatmapSetting, useHeatmapViz, useHeatmapVizRect, useHeatmapWidthByDevice, 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, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, 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, useHeatmapSetting, useHeatmapViz, useHeatmapVizRect, useHeatmapWidthByDevice, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };

package/dist/esm/stores/setting.d.ts

@@ -1,19 +1,19 @@
-import { IClickMode, IClickRankType, IClickType, IDeviceType, IHeatmapType, IScrollType } from '../types';
+import { EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapType, EScrollType } from '../types';
 export interface IHeatmapSettingStore {
     isRendering: Map<string, boolean>;
-    rankedBy: Map<string, IClickRankType | undefined>;
-    deviceType: Map<string, IDeviceType | undefined>;
-    clickType: Map<string, IClickType | undefined>;
-    clickMode: Map<string, IClickMode | undefined>;
-    scrollType: Map<string, IScrollType | undefined>;
-    heatmapType: Map<string, IHeatmapType | undefined>;
+    rankedBy: Map<string, EClickRankType | undefined>;
+    deviceType: Map<string, EDeviceType | undefined>;
+    clickType: Map<string, EClickType | undefined>;
+    clickMode: Map<string, EClickMode | undefined>;
+    scrollType: Map<string, EScrollType | undefined>;
+    heatmapType: Map<string, EHeatmapType | undefined>;
     setIsRendering: (isRendering: boolean, viewId?: string) => void;
-    setRankedBy: (rankedBy: IClickRankType, viewId?: string) => void;
-    setDeviceType: (deviceType: IDeviceType, viewId?: string) => void;
-    setClickType: (clickType: IClickType, viewId?: string) => void;
-    setClickMode: (clickMode: IClickMode, viewId?: string) => void;
-    setScrollType: (scrollType: IScrollType, viewId?: string) => void;
-    setHeatmapType: (heatmapType: IHeatmapType, viewId?: string) => void;
+    setRankedBy: (rankedBy: EClickRankType, viewId?: string) => void;
+    setDeviceType: (deviceType: EDeviceType, viewId?: string) => void;
+    setClickType: (clickType: EClickType, viewId?: string) => void;
+    setClickMode: (clickMode: EClickMode, viewId?: string) => void;
+    setScrollType: (scrollType: EScrollType, viewId?: string) => void;
+    setHeatmapType: (heatmapType: EHeatmapType, viewId?: string) => void;
     copyView: (fromViewId: string, toViewId: string) => void;
     clearView: (viewId: string) => void;
     resetAll: () => void;