@gemx-dev/heatmap-react 3.5.65 → 3.5.67
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/hooks/view-context/index.d.ts +1 -0
- package/dist/esm/hooks/view-context/index.d.ts.map +1 -1
- package/dist/esm/index.js +105 -97
- package/dist/esm/index.mjs +105 -97
- package/dist/esm/types/heatmap.d.ts +17 -9
- package/dist/esm/types/heatmap.d.ts.map +1 -1
- package/dist/umd/hooks/view-context/index.d.ts +1 -0
- package/dist/umd/hooks/view-context/index.d.ts.map +1 -1
- package/dist/umd/index.js +2 -2
- package/dist/umd/types/heatmap.d.ts +17 -9
- package/dist/umd/types/heatmap.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/view-context/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/view-context/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,sBAAsB,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
|
|
4
4
|
import { useEffect, useRef, useCallback, createContext, useContext, useMemo, useState, forwardRef, memo, Fragment as Fragment$1 } from 'react';
|
|
5
|
+
import { useShallow } from 'zustand/react/shallow';
|
|
5
6
|
import { create } from 'zustand';
|
|
6
7
|
import { subscribeWithSelector } from 'zustand/middleware';
|
|
7
|
-
import { useShallow } from 'zustand/react/shallow';
|
|
8
8
|
import { decode } from '@gemx-dev/clarity-decode';
|
|
9
9
|
import { Visualizer } from '@gemx-dev/clarity-visualize';
|
|
10
10
|
import { createPortal } from 'react-dom';
|
|
@@ -151,9 +151,9 @@ function useDebounceCallback(callback, delay) {
|
|
|
151
151
|
|
|
152
152
|
var IDeviceType;
|
|
153
153
|
(function (IDeviceType) {
|
|
154
|
-
IDeviceType["Desktop"] = "
|
|
155
|
-
IDeviceType["Mobile"] = "
|
|
156
|
-
IDeviceType["Tablet"] = "
|
|
154
|
+
IDeviceType["Desktop"] = "DESKTOP";
|
|
155
|
+
IDeviceType["Mobile"] = "MOBILE";
|
|
156
|
+
IDeviceType["Tablet"] = "TABLET";
|
|
157
157
|
})(IDeviceType || (IDeviceType = {}));
|
|
158
158
|
var IHeatmapType;
|
|
159
159
|
(function (IHeatmapType) {
|
|
@@ -162,12 +162,20 @@ var IHeatmapType;
|
|
|
162
162
|
})(IHeatmapType || (IHeatmapType = {}));
|
|
163
163
|
var IClickType;
|
|
164
164
|
(function (IClickType) {
|
|
165
|
-
|
|
166
|
-
IClickType["
|
|
167
|
-
|
|
168
|
-
IClickType["
|
|
169
|
-
|
|
170
|
-
IClickType["
|
|
165
|
+
/** Return all clicks (default) */
|
|
166
|
+
IClickType["All"] = "ALL";
|
|
167
|
+
/** Rapid clicks in a small area, indicating user frustration */
|
|
168
|
+
IClickType["Rage"] = "RAGE";
|
|
169
|
+
/** Clicks with no effect (no navigation, no state change) */
|
|
170
|
+
IClickType["Dead"] = "DEAD";
|
|
171
|
+
/** Clicks followed by JavaScript errors */
|
|
172
|
+
IClickType["Error"] = "ERROR";
|
|
173
|
+
/** The first click of the session */
|
|
174
|
+
IClickType["First"] = "FIRST";
|
|
175
|
+
/** The last click of the session */
|
|
176
|
+
IClickType["Last"] = "LAST";
|
|
177
|
+
/** Normal click with no special behavior (fallback type) */
|
|
178
|
+
IClickType["Standard"] = "STANDARD";
|
|
171
179
|
})(IClickType || (IClickType = {}));
|
|
172
180
|
var IClickRankType;
|
|
173
181
|
(function (IClickRankType) {
|
|
@@ -190,6 +198,90 @@ var IScrollType;
|
|
|
190
198
|
IScrollType["Revenue"] = "revenue-scroll";
|
|
191
199
|
})(IScrollType || (IScrollType = {}));
|
|
192
200
|
|
|
201
|
+
const ViewIdContext = createContext(undefined);
|
|
202
|
+
const useViewIdContext = () => {
|
|
203
|
+
const viewId = useContext(ViewIdContext);
|
|
204
|
+
return viewId || DEFAULT_VIEW_ID;
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
// ===========================
|
|
208
|
+
// Factory Function
|
|
209
|
+
// ===========================
|
|
210
|
+
/**
|
|
211
|
+
* Creates a view-context aware hook with selector support
|
|
212
|
+
*
|
|
213
|
+
* Features:
|
|
214
|
+
* - Automatic viewId injection from context
|
|
215
|
+
* - Selector pattern for granular subscriptions
|
|
216
|
+
* - Full type safety
|
|
217
|
+
* - Optimized re-renders with useShallow
|
|
218
|
+
*
|
|
219
|
+
* @example
|
|
220
|
+
* ```ts
|
|
221
|
+
* const useMyHook = createViewContextHook({
|
|
222
|
+
* useStore: useMyStore,
|
|
223
|
+
* getState: (store, viewId) => ({
|
|
224
|
+
* data: store.data.get(viewId) ?? null,
|
|
225
|
+
* count: store.count.get(viewId) ?? 0,
|
|
226
|
+
* }),
|
|
227
|
+
* getActions: (store, viewId) => ({
|
|
228
|
+
* setData: (data) => store.setData(data, viewId),
|
|
229
|
+
* increment: () => store.increment(viewId),
|
|
230
|
+
* }),
|
|
231
|
+
* });
|
|
232
|
+
*
|
|
233
|
+
* // Usage
|
|
234
|
+
* const data = useMyHook(s => s.data);
|
|
235
|
+
* const { setData } = useMyHook(s => ({ setData: s.setData }));
|
|
236
|
+
* const everything = useMyHook();
|
|
237
|
+
* ```
|
|
238
|
+
*/
|
|
239
|
+
function createViewContextHook(config) {
|
|
240
|
+
function useViewContextHook(selectorOrProps, propsOverload) {
|
|
241
|
+
const isSelector = typeof selectorOrProps === 'function';
|
|
242
|
+
const selector = isSelector ? selectorOrProps : undefined;
|
|
243
|
+
const props = isSelector ? propsOverload : selectorOrProps;
|
|
244
|
+
const contextViewId = useViewIdContext();
|
|
245
|
+
const viewId = props?.viewId || contextViewId;
|
|
246
|
+
// Build actions - memoized for stable references
|
|
247
|
+
const actions = useActions(config, viewId);
|
|
248
|
+
// Subscribe to store with selector
|
|
249
|
+
return config.useStore(useShallow((store) => {
|
|
250
|
+
const state = config.getState(store, viewId);
|
|
251
|
+
const fullResult = { ...state, ...actions };
|
|
252
|
+
return selector ? selector(fullResult) : fullResult;
|
|
253
|
+
}));
|
|
254
|
+
}
|
|
255
|
+
return useViewContextHook;
|
|
256
|
+
}
|
|
257
|
+
// ===========================
|
|
258
|
+
// Helper: Build Actions
|
|
259
|
+
// ===========================
|
|
260
|
+
/**
|
|
261
|
+
* Internal helper to build and memoize actions
|
|
262
|
+
*/
|
|
263
|
+
function useActions(config, viewId) {
|
|
264
|
+
// Get the raw store state to extract action references
|
|
265
|
+
const store = config.useStore.getState();
|
|
266
|
+
// Build actions bound to viewId
|
|
267
|
+
return useMemo(() => config.getActions(store, viewId),
|
|
268
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
269
|
+
[viewId, ...Object.values(extractActionRefs(config.useStore))]);
|
|
270
|
+
}
|
|
271
|
+
/**
|
|
272
|
+
* Extract action function references from store for dependency tracking
|
|
273
|
+
*/
|
|
274
|
+
function extractActionRefs(useStore) {
|
|
275
|
+
const store = useStore.getState();
|
|
276
|
+
const refs = {};
|
|
277
|
+
for (const [key, value] of Object.entries(store)) {
|
|
278
|
+
if (typeof value === 'function') {
|
|
279
|
+
refs[key] = value;
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
return refs;
|
|
283
|
+
}
|
|
284
|
+
|
|
193
285
|
const useHeatmapControlStore = create()((set, get) => {
|
|
194
286
|
return {
|
|
195
287
|
controls: {
|
|
@@ -327,7 +419,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
|
|
|
327
419
|
isRendering: new Map([[DEFAULT_VIEW_ID, false]]),
|
|
328
420
|
rankedBy: new Map([[DEFAULT_VIEW_ID, IClickRankType.MostClicks]]),
|
|
329
421
|
deviceType: new Map([[DEFAULT_VIEW_ID, IDeviceType.Desktop]]),
|
|
330
|
-
clickType: new Map([[DEFAULT_VIEW_ID, IClickType.
|
|
422
|
+
clickType: new Map([[DEFAULT_VIEW_ID, IClickType.All]]),
|
|
331
423
|
clickMode: new Map([[DEFAULT_VIEW_ID, IClickMode.Default]]),
|
|
332
424
|
scrollType: new Map([[DEFAULT_VIEW_ID, IScrollType.Depth]]),
|
|
333
425
|
heatmapType: new Map([[DEFAULT_VIEW_ID, IHeatmapType.Click]]),
|
|
@@ -414,7 +506,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
|
|
|
414
506
|
isRendering: new Map([[DEFAULT_VIEW_ID, false]]),
|
|
415
507
|
rankedBy: new Map([[DEFAULT_VIEW_ID, IClickRankType.MostClicks]]),
|
|
416
508
|
deviceType: new Map([[DEFAULT_VIEW_ID, IDeviceType.Desktop]]),
|
|
417
|
-
clickType: new Map([[DEFAULT_VIEW_ID, IClickType.
|
|
509
|
+
clickType: new Map([[DEFAULT_VIEW_ID, IClickType.All]]),
|
|
418
510
|
clickMode: new Map([[DEFAULT_VIEW_ID, IClickMode.Default]]),
|
|
419
511
|
scrollType: new Map([[DEFAULT_VIEW_ID, IScrollType.Depth]]),
|
|
420
512
|
heatmapType: new Map([[DEFAULT_VIEW_ID, IHeatmapType.Click]]),
|
|
@@ -968,90 +1060,6 @@ const useHeatmapVizRectStore = create()(subscribeWithSelector((set) => {
|
|
|
968
1060
|
};
|
|
969
1061
|
}));
|
|
970
1062
|
|
|
971
|
-
const ViewIdContext = createContext(undefined);
|
|
972
|
-
const useViewIdContext = () => {
|
|
973
|
-
const viewId = useContext(ViewIdContext);
|
|
974
|
-
return viewId || DEFAULT_VIEW_ID;
|
|
975
|
-
};
|
|
976
|
-
|
|
977
|
-
// ===========================
|
|
978
|
-
// Factory Function
|
|
979
|
-
// ===========================
|
|
980
|
-
/**
|
|
981
|
-
* Creates a view-context aware hook with selector support
|
|
982
|
-
*
|
|
983
|
-
* Features:
|
|
984
|
-
* - Automatic viewId injection from context
|
|
985
|
-
* - Selector pattern for granular subscriptions
|
|
986
|
-
* - Full type safety
|
|
987
|
-
* - Optimized re-renders with useShallow
|
|
988
|
-
*
|
|
989
|
-
* @example
|
|
990
|
-
* ```ts
|
|
991
|
-
* const useMyHook = createViewContextHook({
|
|
992
|
-
* useStore: useMyStore,
|
|
993
|
-
* getState: (store, viewId) => ({
|
|
994
|
-
* data: store.data.get(viewId) ?? null,
|
|
995
|
-
* count: store.count.get(viewId) ?? 0,
|
|
996
|
-
* }),
|
|
997
|
-
* getActions: (store, viewId) => ({
|
|
998
|
-
* setData: (data) => store.setData(data, viewId),
|
|
999
|
-
* increment: () => store.increment(viewId),
|
|
1000
|
-
* }),
|
|
1001
|
-
* });
|
|
1002
|
-
*
|
|
1003
|
-
* // Usage
|
|
1004
|
-
* const data = useMyHook(s => s.data);
|
|
1005
|
-
* const { setData } = useMyHook(s => ({ setData: s.setData }));
|
|
1006
|
-
* const everything = useMyHook();
|
|
1007
|
-
* ```
|
|
1008
|
-
*/
|
|
1009
|
-
function createViewContextHook(config) {
|
|
1010
|
-
function useViewContextHook(selectorOrProps, propsOverload) {
|
|
1011
|
-
const isSelector = typeof selectorOrProps === 'function';
|
|
1012
|
-
const selector = isSelector ? selectorOrProps : undefined;
|
|
1013
|
-
const props = isSelector ? propsOverload : selectorOrProps;
|
|
1014
|
-
const contextViewId = useViewIdContext();
|
|
1015
|
-
const viewId = props?.viewId || contextViewId;
|
|
1016
|
-
// Build actions - memoized for stable references
|
|
1017
|
-
const actions = useActions(config, viewId);
|
|
1018
|
-
// Subscribe to store with selector
|
|
1019
|
-
return config.useStore(useShallow((store) => {
|
|
1020
|
-
const state = config.getState(store, viewId);
|
|
1021
|
-
const fullResult = { ...state, ...actions };
|
|
1022
|
-
return selector ? selector(fullResult) : fullResult;
|
|
1023
|
-
}));
|
|
1024
|
-
}
|
|
1025
|
-
return useViewContextHook;
|
|
1026
|
-
}
|
|
1027
|
-
// ===========================
|
|
1028
|
-
// Helper: Build Actions
|
|
1029
|
-
// ===========================
|
|
1030
|
-
/**
|
|
1031
|
-
* Internal helper to build and memoize actions
|
|
1032
|
-
*/
|
|
1033
|
-
function useActions(config, viewId) {
|
|
1034
|
-
// Get the raw store state to extract action references
|
|
1035
|
-
const store = config.useStore.getState();
|
|
1036
|
-
// Build actions bound to viewId
|
|
1037
|
-
return useMemo(() => config.getActions(store, viewId),
|
|
1038
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1039
|
-
[viewId, ...Object.values(extractActionRefs(config.useStore))]);
|
|
1040
|
-
}
|
|
1041
|
-
/**
|
|
1042
|
-
* Extract action function references from store for dependency tracking
|
|
1043
|
-
*/
|
|
1044
|
-
function extractActionRefs(useStore) {
|
|
1045
|
-
const store = useStore.getState();
|
|
1046
|
-
const refs = {};
|
|
1047
|
-
for (const [key, value] of Object.entries(store)) {
|
|
1048
|
-
if (typeof value === 'function') {
|
|
1049
|
-
refs[key] = value;
|
|
1050
|
-
}
|
|
1051
|
-
}
|
|
1052
|
-
return refs;
|
|
1053
|
-
}
|
|
1054
|
-
|
|
1055
1063
|
const useHeatmapAreaClick = createViewContextHook({
|
|
1056
1064
|
useStore: useHeatmapVizClickAreaStore,
|
|
1057
1065
|
getState: (store, viewId) => ({
|
|
@@ -8740,4 +8748,4 @@ const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataIn
|
|
|
8740
8748
|
}
|
|
8741
8749
|
};
|
|
8742
8750
|
|
|
8743
|
-
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, 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 };
|
|
8751
|
+
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 };
|
package/dist/esm/index.mjs
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
|
|
4
4
|
import { useEffect, useRef, useCallback, createContext, useContext, useMemo, useState, forwardRef, memo, Fragment as Fragment$1 } from 'react';
|
|
5
|
+
import { useShallow } from 'zustand/react/shallow';
|
|
5
6
|
import { create } from 'zustand';
|
|
6
7
|
import { subscribeWithSelector } from 'zustand/middleware';
|
|
7
|
-
import { useShallow } from 'zustand/react/shallow';
|
|
8
8
|
import { decode } from '@gemx-dev/clarity-decode';
|
|
9
9
|
import { Visualizer } from '@gemx-dev/clarity-visualize';
|
|
10
10
|
import { createPortal } from 'react-dom';
|
|
@@ -151,9 +151,9 @@ function useDebounceCallback(callback, delay) {
|
|
|
151
151
|
|
|
152
152
|
var IDeviceType;
|
|
153
153
|
(function (IDeviceType) {
|
|
154
|
-
IDeviceType["Desktop"] = "
|
|
155
|
-
IDeviceType["Mobile"] = "
|
|
156
|
-
IDeviceType["Tablet"] = "
|
|
154
|
+
IDeviceType["Desktop"] = "DESKTOP";
|
|
155
|
+
IDeviceType["Mobile"] = "MOBILE";
|
|
156
|
+
IDeviceType["Tablet"] = "TABLET";
|
|
157
157
|
})(IDeviceType || (IDeviceType = {}));
|
|
158
158
|
var IHeatmapType;
|
|
159
159
|
(function (IHeatmapType) {
|
|
@@ -162,12 +162,20 @@ var IHeatmapType;
|
|
|
162
162
|
})(IHeatmapType || (IHeatmapType = {}));
|
|
163
163
|
var IClickType;
|
|
164
164
|
(function (IClickType) {
|
|
165
|
-
|
|
166
|
-
IClickType["
|
|
167
|
-
|
|
168
|
-
IClickType["
|
|
169
|
-
|
|
170
|
-
IClickType["
|
|
165
|
+
/** Return all clicks (default) */
|
|
166
|
+
IClickType["All"] = "ALL";
|
|
167
|
+
/** Rapid clicks in a small area, indicating user frustration */
|
|
168
|
+
IClickType["Rage"] = "RAGE";
|
|
169
|
+
/** Clicks with no effect (no navigation, no state change) */
|
|
170
|
+
IClickType["Dead"] = "DEAD";
|
|
171
|
+
/** Clicks followed by JavaScript errors */
|
|
172
|
+
IClickType["Error"] = "ERROR";
|
|
173
|
+
/** The first click of the session */
|
|
174
|
+
IClickType["First"] = "FIRST";
|
|
175
|
+
/** The last click of the session */
|
|
176
|
+
IClickType["Last"] = "LAST";
|
|
177
|
+
/** Normal click with no special behavior (fallback type) */
|
|
178
|
+
IClickType["Standard"] = "STANDARD";
|
|
171
179
|
})(IClickType || (IClickType = {}));
|
|
172
180
|
var IClickRankType;
|
|
173
181
|
(function (IClickRankType) {
|
|
@@ -190,6 +198,90 @@ var IScrollType;
|
|
|
190
198
|
IScrollType["Revenue"] = "revenue-scroll";
|
|
191
199
|
})(IScrollType || (IScrollType = {}));
|
|
192
200
|
|
|
201
|
+
const ViewIdContext = createContext(undefined);
|
|
202
|
+
const useViewIdContext = () => {
|
|
203
|
+
const viewId = useContext(ViewIdContext);
|
|
204
|
+
return viewId || DEFAULT_VIEW_ID;
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
// ===========================
|
|
208
|
+
// Factory Function
|
|
209
|
+
// ===========================
|
|
210
|
+
/**
|
|
211
|
+
* Creates a view-context aware hook with selector support
|
|
212
|
+
*
|
|
213
|
+
* Features:
|
|
214
|
+
* - Automatic viewId injection from context
|
|
215
|
+
* - Selector pattern for granular subscriptions
|
|
216
|
+
* - Full type safety
|
|
217
|
+
* - Optimized re-renders with useShallow
|
|
218
|
+
*
|
|
219
|
+
* @example
|
|
220
|
+
* ```ts
|
|
221
|
+
* const useMyHook = createViewContextHook({
|
|
222
|
+
* useStore: useMyStore,
|
|
223
|
+
* getState: (store, viewId) => ({
|
|
224
|
+
* data: store.data.get(viewId) ?? null,
|
|
225
|
+
* count: store.count.get(viewId) ?? 0,
|
|
226
|
+
* }),
|
|
227
|
+
* getActions: (store, viewId) => ({
|
|
228
|
+
* setData: (data) => store.setData(data, viewId),
|
|
229
|
+
* increment: () => store.increment(viewId),
|
|
230
|
+
* }),
|
|
231
|
+
* });
|
|
232
|
+
*
|
|
233
|
+
* // Usage
|
|
234
|
+
* const data = useMyHook(s => s.data);
|
|
235
|
+
* const { setData } = useMyHook(s => ({ setData: s.setData }));
|
|
236
|
+
* const everything = useMyHook();
|
|
237
|
+
* ```
|
|
238
|
+
*/
|
|
239
|
+
function createViewContextHook(config) {
|
|
240
|
+
function useViewContextHook(selectorOrProps, propsOverload) {
|
|
241
|
+
const isSelector = typeof selectorOrProps === 'function';
|
|
242
|
+
const selector = isSelector ? selectorOrProps : undefined;
|
|
243
|
+
const props = isSelector ? propsOverload : selectorOrProps;
|
|
244
|
+
const contextViewId = useViewIdContext();
|
|
245
|
+
const viewId = props?.viewId || contextViewId;
|
|
246
|
+
// Build actions - memoized for stable references
|
|
247
|
+
const actions = useActions(config, viewId);
|
|
248
|
+
// Subscribe to store with selector
|
|
249
|
+
return config.useStore(useShallow((store) => {
|
|
250
|
+
const state = config.getState(store, viewId);
|
|
251
|
+
const fullResult = { ...state, ...actions };
|
|
252
|
+
return selector ? selector(fullResult) : fullResult;
|
|
253
|
+
}));
|
|
254
|
+
}
|
|
255
|
+
return useViewContextHook;
|
|
256
|
+
}
|
|
257
|
+
// ===========================
|
|
258
|
+
// Helper: Build Actions
|
|
259
|
+
// ===========================
|
|
260
|
+
/**
|
|
261
|
+
* Internal helper to build and memoize actions
|
|
262
|
+
*/
|
|
263
|
+
function useActions(config, viewId) {
|
|
264
|
+
// Get the raw store state to extract action references
|
|
265
|
+
const store = config.useStore.getState();
|
|
266
|
+
// Build actions bound to viewId
|
|
267
|
+
return useMemo(() => config.getActions(store, viewId),
|
|
268
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
269
|
+
[viewId, ...Object.values(extractActionRefs(config.useStore))]);
|
|
270
|
+
}
|
|
271
|
+
/**
|
|
272
|
+
* Extract action function references from store for dependency tracking
|
|
273
|
+
*/
|
|
274
|
+
function extractActionRefs(useStore) {
|
|
275
|
+
const store = useStore.getState();
|
|
276
|
+
const refs = {};
|
|
277
|
+
for (const [key, value] of Object.entries(store)) {
|
|
278
|
+
if (typeof value === 'function') {
|
|
279
|
+
refs[key] = value;
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
return refs;
|
|
283
|
+
}
|
|
284
|
+
|
|
193
285
|
const useHeatmapControlStore = create()((set, get) => {
|
|
194
286
|
return {
|
|
195
287
|
controls: {
|
|
@@ -327,7 +419,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
|
|
|
327
419
|
isRendering: new Map([[DEFAULT_VIEW_ID, false]]),
|
|
328
420
|
rankedBy: new Map([[DEFAULT_VIEW_ID, IClickRankType.MostClicks]]),
|
|
329
421
|
deviceType: new Map([[DEFAULT_VIEW_ID, IDeviceType.Desktop]]),
|
|
330
|
-
clickType: new Map([[DEFAULT_VIEW_ID, IClickType.
|
|
422
|
+
clickType: new Map([[DEFAULT_VIEW_ID, IClickType.All]]),
|
|
331
423
|
clickMode: new Map([[DEFAULT_VIEW_ID, IClickMode.Default]]),
|
|
332
424
|
scrollType: new Map([[DEFAULT_VIEW_ID, IScrollType.Depth]]),
|
|
333
425
|
heatmapType: new Map([[DEFAULT_VIEW_ID, IHeatmapType.Click]]),
|
|
@@ -414,7 +506,7 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
|
|
|
414
506
|
isRendering: new Map([[DEFAULT_VIEW_ID, false]]),
|
|
415
507
|
rankedBy: new Map([[DEFAULT_VIEW_ID, IClickRankType.MostClicks]]),
|
|
416
508
|
deviceType: new Map([[DEFAULT_VIEW_ID, IDeviceType.Desktop]]),
|
|
417
|
-
clickType: new Map([[DEFAULT_VIEW_ID, IClickType.
|
|
509
|
+
clickType: new Map([[DEFAULT_VIEW_ID, IClickType.All]]),
|
|
418
510
|
clickMode: new Map([[DEFAULT_VIEW_ID, IClickMode.Default]]),
|
|
419
511
|
scrollType: new Map([[DEFAULT_VIEW_ID, IScrollType.Depth]]),
|
|
420
512
|
heatmapType: new Map([[DEFAULT_VIEW_ID, IHeatmapType.Click]]),
|
|
@@ -968,90 +1060,6 @@ const useHeatmapVizRectStore = create()(subscribeWithSelector((set) => {
|
|
|
968
1060
|
};
|
|
969
1061
|
}));
|
|
970
1062
|
|
|
971
|
-
const ViewIdContext = createContext(undefined);
|
|
972
|
-
const useViewIdContext = () => {
|
|
973
|
-
const viewId = useContext(ViewIdContext);
|
|
974
|
-
return viewId || DEFAULT_VIEW_ID;
|
|
975
|
-
};
|
|
976
|
-
|
|
977
|
-
// ===========================
|
|
978
|
-
// Factory Function
|
|
979
|
-
// ===========================
|
|
980
|
-
/**
|
|
981
|
-
* Creates a view-context aware hook with selector support
|
|
982
|
-
*
|
|
983
|
-
* Features:
|
|
984
|
-
* - Automatic viewId injection from context
|
|
985
|
-
* - Selector pattern for granular subscriptions
|
|
986
|
-
* - Full type safety
|
|
987
|
-
* - Optimized re-renders with useShallow
|
|
988
|
-
*
|
|
989
|
-
* @example
|
|
990
|
-
* ```ts
|
|
991
|
-
* const useMyHook = createViewContextHook({
|
|
992
|
-
* useStore: useMyStore,
|
|
993
|
-
* getState: (store, viewId) => ({
|
|
994
|
-
* data: store.data.get(viewId) ?? null,
|
|
995
|
-
* count: store.count.get(viewId) ?? 0,
|
|
996
|
-
* }),
|
|
997
|
-
* getActions: (store, viewId) => ({
|
|
998
|
-
* setData: (data) => store.setData(data, viewId),
|
|
999
|
-
* increment: () => store.increment(viewId),
|
|
1000
|
-
* }),
|
|
1001
|
-
* });
|
|
1002
|
-
*
|
|
1003
|
-
* // Usage
|
|
1004
|
-
* const data = useMyHook(s => s.data);
|
|
1005
|
-
* const { setData } = useMyHook(s => ({ setData: s.setData }));
|
|
1006
|
-
* const everything = useMyHook();
|
|
1007
|
-
* ```
|
|
1008
|
-
*/
|
|
1009
|
-
function createViewContextHook(config) {
|
|
1010
|
-
function useViewContextHook(selectorOrProps, propsOverload) {
|
|
1011
|
-
const isSelector = typeof selectorOrProps === 'function';
|
|
1012
|
-
const selector = isSelector ? selectorOrProps : undefined;
|
|
1013
|
-
const props = isSelector ? propsOverload : selectorOrProps;
|
|
1014
|
-
const contextViewId = useViewIdContext();
|
|
1015
|
-
const viewId = props?.viewId || contextViewId;
|
|
1016
|
-
// Build actions - memoized for stable references
|
|
1017
|
-
const actions = useActions(config, viewId);
|
|
1018
|
-
// Subscribe to store with selector
|
|
1019
|
-
return config.useStore(useShallow((store) => {
|
|
1020
|
-
const state = config.getState(store, viewId);
|
|
1021
|
-
const fullResult = { ...state, ...actions };
|
|
1022
|
-
return selector ? selector(fullResult) : fullResult;
|
|
1023
|
-
}));
|
|
1024
|
-
}
|
|
1025
|
-
return useViewContextHook;
|
|
1026
|
-
}
|
|
1027
|
-
// ===========================
|
|
1028
|
-
// Helper: Build Actions
|
|
1029
|
-
// ===========================
|
|
1030
|
-
/**
|
|
1031
|
-
* Internal helper to build and memoize actions
|
|
1032
|
-
*/
|
|
1033
|
-
function useActions(config, viewId) {
|
|
1034
|
-
// Get the raw store state to extract action references
|
|
1035
|
-
const store = config.useStore.getState();
|
|
1036
|
-
// Build actions bound to viewId
|
|
1037
|
-
return useMemo(() => config.getActions(store, viewId),
|
|
1038
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1039
|
-
[viewId, ...Object.values(extractActionRefs(config.useStore))]);
|
|
1040
|
-
}
|
|
1041
|
-
/**
|
|
1042
|
-
* Extract action function references from store for dependency tracking
|
|
1043
|
-
*/
|
|
1044
|
-
function extractActionRefs(useStore) {
|
|
1045
|
-
const store = useStore.getState();
|
|
1046
|
-
const refs = {};
|
|
1047
|
-
for (const [key, value] of Object.entries(store)) {
|
|
1048
|
-
if (typeof value === 'function') {
|
|
1049
|
-
refs[key] = value;
|
|
1050
|
-
}
|
|
1051
|
-
}
|
|
1052
|
-
return refs;
|
|
1053
|
-
}
|
|
1054
|
-
|
|
1055
1063
|
const useHeatmapAreaClick = createViewContextHook({
|
|
1056
1064
|
useStore: useHeatmapVizClickAreaStore,
|
|
1057
1065
|
getState: (store, viewId) => ({
|
|
@@ -8740,4 +8748,4 @@ const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataIn
|
|
|
8740
8748
|
}
|
|
8741
8749
|
};
|
|
8742
8750
|
|
|
8743
|
-
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, 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 };
|
|
8751
|
+
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 };
|
|
@@ -1,19 +1,27 @@
|
|
|
1
1
|
export declare enum IDeviceType {
|
|
2
|
-
Desktop = "
|
|
3
|
-
Mobile = "
|
|
4
|
-
Tablet = "
|
|
2
|
+
Desktop = "DESKTOP",
|
|
3
|
+
Mobile = "MOBILE",
|
|
4
|
+
Tablet = "TABLET"
|
|
5
5
|
}
|
|
6
6
|
export declare enum IHeatmapType {
|
|
7
7
|
Click = "click",
|
|
8
8
|
Scroll = "scroll"
|
|
9
9
|
}
|
|
10
10
|
export declare enum IClickType {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
/** Return all clicks (default) */
|
|
12
|
+
All = "ALL",
|
|
13
|
+
/** Rapid clicks in a small area, indicating user frustration */
|
|
14
|
+
Rage = "RAGE",
|
|
15
|
+
/** Clicks with no effect (no navigation, no state change) */
|
|
16
|
+
Dead = "DEAD",
|
|
17
|
+
/** Clicks followed by JavaScript errors */
|
|
18
|
+
Error = "ERROR",
|
|
19
|
+
/** The first click of the session */
|
|
20
|
+
First = "FIRST",
|
|
21
|
+
/** The last click of the session */
|
|
22
|
+
Last = "LAST",
|
|
23
|
+
/** Normal click with no special behavior (fallback type) */
|
|
24
|
+
Standard = "STANDARD"
|
|
17
25
|
}
|
|
18
26
|
export declare enum IClickRankType {
|
|
19
27
|
MostClicks = "most-clicks",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"heatmap.d.ts","sourceRoot":"","sources":["../../src/types/heatmap.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,oBAAY,UAAU;IACpB,
|
|
1
|
+
{"version":3,"file":"heatmap.d.ts","sourceRoot":"","sources":["../../src/types/heatmap.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,oBAAY,UAAU;IACpB,kCAAkC;IAClC,GAAG,QAAQ;IACX,gEAAgE;IAChE,IAAI,SAAS;IACb,6DAA6D;IAC7D,IAAI,SAAS;IACb,2CAA2C;IAC3C,KAAK,UAAU;IACf,qCAAqC;IACrC,KAAK,UAAU;IACf,oCAAoC;IACpC,IAAI,SAAS;IACb,4DAA4D;IAC5D,QAAQ,aAAa;CACtB;AAED,oBAAY,cAAc;IACxB,UAAU,gBAAgB;IAC1B,OAAO,YAAY;IACnB,eAAe,qBAAqB;IACpC,cAAc,oBAAoB;IAClC,eAAe,sBAAsB;IACrC,iBAAiB,wBAAwB;CAC1C;AAED,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,IAAI,eAAe;CACpB;AAED,oBAAY,WAAW;IACrB,KAAK,iBAAiB;IACtB,SAAS,qBAAqB;IAC9B,OAAO,mBAAmB;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/view-context/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/view-context/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,sBAAsB,CAAC"}
|