@gemx-dev/clarity-visualize 0.8.55 → 0.8.57

package/build/clarity.visualize.module.js

@@ -975,51 +975,6 @@ var HeatmapHelper = /** @class */ (function () {
             }
             return null;
         };
-        this.visibleV2 = function (el, r, height) {
-            var doc = _this.state.window.document;
-            var visibility = r.height > height ? true : false;
-            if (visibility === false && r.width > 0 && r.height > 0) {
-                while (!visibility && doc) {
-                    var shadowElement = null;
-                    var elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
-                    // Check if only dialog and HTML are returned (element is behind dialog)
-                    var hasOnlyDialogAndHtml = elements.length === 2 &&
-                        elements[0].tagName === 'DIALOG' &&
-                        elements[1].tagName === 'HTML';
-                    // If element is behind a dialog, assume it's visible
-                    // (we can't check through top-layer, so trust the element exists)
-                    if (hasOnlyDialogAndHtml) {
-                        visibility = true;
-                        break;
-                    }
-                    for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) {
-                        var e = elements_2[_i];
-                        // Check if this is the target element BEFORE skipping dialogs
-                        // This handles case where target element IS a dialog
-                        if (e === el) {
-                            visibility = true;
-                            shadowElement = e.shadowRoot && e.shadowRoot != doc ? e.shadowRoot : null;
-                            break;
-                        }
-                        // Skip dialog elements - treat as transparent for checking elements behind
-                        if (e.tagName === 'DIALOG') {
-                            continue;
-                        }
-                        // Skip canvas and clarity elements
-                        if (e.tagName === "CANVAS" /* Constant.Canvas */ ||
-                            (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0)) {
-                            continue;
-                        }
-                        // This is the first non-ignored element
-                        visibility = e === el;
-                        shadowElement = e.shadowRoot && e.shadowRoot != doc ? e.shadowRoot : null;
-                        break;
-                    }
-                    doc = shadowElement;
-                }
-            }
-            return visibility && r.bottom >= 0 && r.top <= height;
-        };
         this.state = state;
         this.layout = layout;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemx-dev/clarity-visualize",
-  "version": "0.8.55",
+  "version": "0.8.57",
   "description": "Clarity visualize",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -9,7 +9,7 @@
   "unpkg": "build/clarity.visualize.min.js",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@gemx-dev/clarity-decode": "^0.8.55"
+    "@gemx-dev/clarity-decode": "^0.8.57"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

package/src/custom/canvas-layer.ts

@@ -1,4 +1,4 @@
-import { Constant, Setting } from "@clarity-types/visualize";
+import { Constant } from "@clarity-types/visualize";
 
 /**
  * Custom module for managing canvas layer z-index with dialog top-layer
@@ -28,12 +28,14 @@ export interface ParentCanvasInfo {
  */
 export function createParentWindowCanvas(
     iframeDoc: Document,
+    portalCanvasId: string
 ): ParentCanvasInfo | null {
     // Check if we're inside an iframe
     if (iframeDoc.defaultView === iframeDoc.defaultView?.top) {
         throw new Error('Not in iframe: ' + iframeDoc.defaultView);
     }
-
+    
+    
     try {
         const parentWindow = iframeDoc.defaultView?.parent;
         const parentDoc = parentWindow?.document;
@@ -47,10 +49,11 @@ export function createParentWindowCanvas(
         if (!iframeParent) throw new Error('Iframe parent not found');
 
         // Create canvas as sibling to iframe
-        let canvas = parentDoc.getElementById(Constant.HeatmapCanvas) as HTMLCanvasElement;
+        const canvasId = `${Constant.HeatmapCanvas}-${portalCanvasId}`;
+        let canvas = parentDoc.getElementById(canvasId) as HTMLCanvasElement;
         if (canvas === null) {
             canvas = parentDoc.createElement('canvas');
-            canvas.id = Constant.HeatmapCanvas;
+            canvas.id = canvasId;
             canvas.width = 0;
             canvas.height = 0;
             canvas.style.position = Constant.Absolute;

package/src/heatmap.ts

@@ -191,7 +191,7 @@ export class HeatmapHelper {
         let win = this.state.window;
         let de = doc.documentElement;
 
-        const isPortalCanvas = this.state.options.portalCanvas;
+        const isPortalCanvas = !!this.state.options.portalCanvasId;
         if (isPortalCanvas) return this.createPortalCanvas(doc, win, de);
         
         let canvas = doc.getElementById(Constant.HeatmapCanvas) as HTMLCanvasElement;
@@ -328,7 +328,7 @@ export class HeatmapHelper {
     }
     
     private waitForDialogs = async (): Promise<void> => {
-        const isPortalCanvas = this.state.options.portalCanvas;
+        const isPortalCanvas = !!this.state.options.portalCanvasId;
         if (!isPortalCanvas) return ;
         
         await dialogCustom.waitForDialogsRendered();
@@ -340,7 +340,7 @@ export class HeatmapHelper {
         try {
             canvas = this.parentCanvasInfo?.canvas;
             if (!canvas) {
-                this.parentCanvasInfo = canvasLayer.createParentWindowCanvas(doc);
+                this.parentCanvasInfo = canvasLayer.createParentWindowCanvas(doc, this.state.options.portalCanvasId);
                 canvas = this.parentCanvasInfo.canvas;
 
                 // Add event listeners only once when canvas is created
@@ -352,7 +352,7 @@ export class HeatmapHelper {
             }
 
             canvas.width = de.clientWidth;
-            canvas.height = de.clientHeight + 4; // TODO: GEMX VERIFY
+            canvas.height = de.clientHeight; // TODO: GEMX VERIFY
             canvas.style.top = '0';
             canvas.style.left = '0';
             canvas.getContext(Constant.Context).clearRect(0, 0, canvas.width, canvas.height);
@@ -365,55 +365,55 @@ export class HeatmapHelper {
         return null;
     }
     
-    private visibleV2 = (el: HTMLElement, r: DOMRect, height: number): boolean => {
-        let doc: Document | ShadowRoot = this.state.window.document;
-        let visibility = r.height > height ? true : false;
-        if (visibility === false && r.width > 0 && r.height > 0) {
-            while (!visibility && doc) {
-                let shadowElement = null;
-                let elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
-
-                // Check if only dialog and HTML are returned (element is behind dialog)
-                let hasOnlyDialogAndHtml = elements.length === 2 &&
-                    elements[0].tagName === 'DIALOG' &&
-                    elements[1].tagName === 'HTML';
-
-                // If element is behind a dialog, assume it's visible
-                // (we can't check through top-layer, so trust the element exists)
-                if (hasOnlyDialogAndHtml) {
-                    visibility = true;
-                    break;
-                }
-
-                for (let e of elements) {
-                    // Check if this is the target element BEFORE skipping dialogs
-                    // This handles case where target element IS a dialog
-                    if (e === el) {
-                        visibility = true;
-                        shadowElement = e.shadowRoot && e.shadowRoot != doc ? e.shadowRoot : null;
-                        break;
-                    }
-
-                    // Skip dialog elements - treat as transparent for checking elements behind
-                    if (e.tagName === 'DIALOG') {
-                        continue;
-                    }
-
-                    // Skip canvas and clarity elements
-                    if (e.tagName === Constant.Canvas ||
-                        (e.id && e.id.indexOf(Constant.ClarityPrefix) === 0)) {
-                        continue;
-                    }
-
-                    // This is the first non-ignored element
-                    visibility = e === el;
-                    shadowElement = e.shadowRoot && e.shadowRoot != doc ? e.shadowRoot : null;
-                    break;
-                }
-
-                doc = shadowElement;
-            }
-        }
-        return visibility && r.bottom >= 0 && r.top <= height;
-    }
+    // private _visibleV2 = (el: HTMLElement, r: DOMRect, height: number): boolean => {
+    //     let doc: Document | ShadowRoot = this.state.window.document;
+    //     let visibility = r.height > height ? true : false;
+    //     if (visibility === false && r.width > 0 && r.height > 0) {
+    //         while (!visibility && doc) {
+    //             let shadowElement = null;
+    //             let elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
+
+    //             // Check if only dialog and HTML are returned (element is behind dialog)
+    //             let hasOnlyDialogAndHtml = elements.length === 2 &&
+    //                 elements[0].tagName === 'DIALOG' &&
+    //                 elements[1].tagName === 'HTML';
+
+    //             // If element is behind a dialog, assume it's visible
+    //             // (we can't check through top-layer, so trust the element exists)
+    //             if (hasOnlyDialogAndHtml) {
+    //                 visibility = true;
+    //                 break;
+    //             }
+
+    //             for (let e of elements) {
+    //                 // Check if this is the target element BEFORE skipping dialogs
+    //                 // This handles case where target element IS a dialog
+    //                 if (e === el) {
+    //                     visibility = true;
+    //                     shadowElement = e.shadowRoot && e.shadowRoot != doc ? e.shadowRoot : null;
+    //                     break;
+    //                 }
+
+    //                 // Skip dialog elements - treat as transparent for checking elements behind
+    //                 if (e.tagName === 'DIALOG') {
+    //                     continue;
+    //                 }
+
+    //                 // Skip canvas and clarity elements
+    //                 if (e.tagName === Constant.Canvas ||
+    //                     (e.id && e.id.indexOf(Constant.ClarityPrefix) === 0)) {
+    //                     continue;
+    //                 }
+
+    //                 // This is the first non-ignored element
+    //                 visibility = e === el;
+    //                 shadowElement = e.shadowRoot && e.shadowRoot != doc ? e.shadowRoot : null;
+    //                 break;
+    //             }
+
+    //             doc = shadowElement;
+    //         }
+    //     }
+    //     return visibility && r.bottom >= 0 && r.top <= height;
+    // }
 }

package/src/visualizer.ts

@@ -53,12 +53,12 @@ export class Visualizer implements VisualizerType {
         }
     }
 
-    public html = async (decoded: DecodedData.DecodedPayload[], target: Window, portalCanvas?: boolean, hash: string = null, useproxy?: LinkHandler, logerror?: ErrorLogger, shortCircuitStrategy: ShortCircuitStrategy = ShortCircuitStrategy.None): Promise<Visualizer> => {
+    public html = async (decoded: DecodedData.DecodedPayload[], target: Window, portalCanvasId?: string, hash: string = null, useproxy?: LinkHandler, logerror?: ErrorLogger, shortCircuitStrategy: ShortCircuitStrategy = ShortCircuitStrategy.None): Promise<Visualizer> => {
         if (decoded && decoded.length > 0 && target) {
             try {
                 // Flatten the payload and parse all events out of them, sorted by time
                 let merged = this.merge(decoded);
-                await this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy, portalCanvas });
+                await this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy, portalCanvasId });
                 // Render all mutations on top of the initial markup
                 while (merged.events.length > 0) {
                     let entry = merged.events.shift();

package/types/visualize.d.ts

@@ -20,7 +20,7 @@ export interface Visualize {
 export class Visualizer {
     readonly state: PlaybackState;
     dom: (event: Layout.DomEvent) => Promise<void>;
-    html: (decoded: Data.DecodedPayload[], target: Window, portalCanvas?: boolean, hash?: string, useproxy?: LinkHandler, logerror?: ErrorLogger, shortCircuitStrategy?: ShortCircuitStrategy) => Promise<Visualizer>;
+    html: (decoded: Data.DecodedPayload[], target: Window, portalCanvasId?: string, hash?: string, useproxy?: LinkHandler, logerror?: ErrorLogger, shortCircuitStrategy?: ShortCircuitStrategy) => Promise<Visualizer>;
     clickmap: (activity?: Activity) => void;
     clearmap: () => void;
     scrollmap: (data?: ScrollMapInfo[], averageFold?: number, addMarkers?: boolean) => void;
@@ -65,7 +65,7 @@ export interface Options {
     metadata?: HTMLElement;
     pointer?: boolean;
     canvas?: boolean;
-    portalCanvas?: boolean;
+    portalCanvasId?: string;
     keyframes?: boolean;
     mobile?: boolean;
     vNext?: boolean;