@gemx-dev/clarity-visualize 0.8.52 → 0.8.53

package/src/heatmap.ts

@@ -2,6 +2,9 @@ import { Activity, Constant, Heatmap, Setting, ScrollMapInfo, PlaybackState } fr
 import { Data } from "@gemx-dev/clarity-js";
 import { LayoutHelper } from "./layout";
 
+import * as canvasLayer from "./custom/canvas-layer";
+import * as dialogCustom from "./custom/dialog";
+
 export class HeatmapHelper {
     static COLORS = ["blue", "cyan", "lime", "yellow", "red"];
     data: Activity = null;
@@ -15,6 +18,7 @@ export class HeatmapHelper {
     layout: LayoutHelper = null;
     scrollAvgFold: number = null;
     addScrollMakers: boolean = false;
+    parentCanvasInfo: canvasLayer.ParentCanvasInfo | null = null;
 
     constructor(state: PlaybackState, layout: LayoutHelper) {
         this.state = state;
@@ -29,6 +33,12 @@ export class HeatmapHelper {
         this.gradientPixels = null;
         this.timeout = null;
 
+        // Cleanup parent canvas if it exists
+        if (this.parentCanvasInfo) {
+            this.parentCanvasInfo.cleanup();
+            this.parentCanvasInfo = null;
+        }
+
         // Reset resize observer
         if (this.observer) {
             this.observer.disconnect();
@@ -55,10 +65,19 @@ export class HeatmapHelper {
             canvas.style.top = win.pageYOffset + Constant.Pixel;
             canvas.getContext(Constant.Context).clearRect(0, 0, canvas.width, canvas.height);
         }
+
+        // Cleanup parent canvas before reset
+        if (this.parentCanvasInfo) {
+            this.parentCanvasInfo.cleanup();
+            this.parentCanvasInfo = null;
+        }
+
         this.reset();
     }
 
-    public scroll = (activity: ScrollMapInfo[], avgFold: number, addMarkers: boolean): void => {
+    public scroll = async (activity: ScrollMapInfo[], avgFold: number, addMarkers: boolean): Promise<void> => {
+        await this.waitForDialogs();
+        
         this.scrollData = this.scrollData || activity;
         this.scrollAvgFold = avgFold != null ? avgFold : this.scrollAvgFold;
         this.addScrollMakers = addMarkers != null ? addMarkers : this.addScrollMakers;
@@ -123,13 +142,19 @@ export class HeatmapHelper {
         context.fillText(label, Setting.MarkerPadding, markerY + Setting.MarkerPadding);
     }
 
-    public click = (activity: Activity): void => {
+    public click = async (activity: Activity): Promise<void> => {
+        await this.waitForDialogs();
+        
         this.data = this.data || activity;
         let heat = this.transform();
         let canvas = this.overlay();
         let ctx = canvas.getContext(Constant.Context);
 
         if (canvas.width > 0 && canvas.height > 0) {
+            // TODO: GEMX DEBUG Draw a test rectangle to verify canvas is working
+            // ctx.fillStyle = 'rgba(255, 0, 0, 0.3)';
+            // ctx.fillRect(10, 10, 100, 100);
+
             // To speed up canvas rendering, we draw ring & gradient on an offscreen canvas, so we can use drawImage API
             // Canvas performance tips: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
             // Pre-render similar primitives or repeating objects on an offscreen canvas
@@ -157,7 +182,7 @@ export class HeatmapHelper {
                 }
             }
             ctx.putImageData(pixels, 0, 0);
-        };
+        }
     }
 
     private overlay = (): HTMLCanvasElement => {
@@ -165,6 +190,10 @@ export class HeatmapHelper {
         let doc = this.state.window.document;
         let win = this.state.window;
         let de = doc.documentElement;
+
+        const isPortalCanvas = this.state.options.portalCanvas;
+        if (isPortalCanvas) return this.createPortalCanvas(doc, win, de);
+        
         let canvas = doc.getElementById(Constant.HeatmapCanvas) as HTMLCanvasElement;
         if (canvas === null) {
             canvas = doc.createElement(Constant.Canvas) as HTMLCanvasElement;
@@ -297,4 +326,94 @@ export class HeatmapHelper {
         }
         return visibility && r.bottom >= 0 && r.top <= height;
     }
+    
+    private waitForDialogs = async (): Promise<void> => {
+        const isPortalCanvas = this.state.options.portalCanvas;
+        if (!isPortalCanvas) return ;
+        
+        await dialogCustom.waitForDialogsRendered();
+        return;
+    }
+
+    private createPortalCanvas = (doc: Document, win: Window, de: HTMLElement): HTMLCanvasElement => {
+        let canvas = null;
+        try {
+            canvas = this.parentCanvasInfo?.canvas;
+            if (!canvas) {
+                this.parentCanvasInfo = canvasLayer.createParentWindowCanvas(doc);
+                canvas = this.parentCanvasInfo.canvas;
+
+                // Add event listeners only once when canvas is created
+                win.addEventListener("scroll", this.redraw, true);
+                win.addEventListener("resize", this.redraw, true);
+                this.observer = this.state.window["ResizeObserver"] ? new ResizeObserver(this.redraw) : null;
+
+                if (this.observer) { this.observer.observe(doc.body); }
+            }
+
+            canvas.width = de.clientWidth;
+            canvas.height = de.clientHeight + 4; // TODO: GEMX VERIFY
+            canvas.style.top = '0';
+            canvas.style.left = '0';
+            canvas.getContext(Constant.Context).clearRect(0, 0, canvas.width, canvas.height);
+
+            this.parentCanvasInfo.canvas = canvas;
+            return canvas;
+        } catch (error) {
+            console.error(`🚀 🐥 ~ HeatmapHelper ~ createPortalCanvas:`, error);
+        }
+        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;
+    }
 }

package/src/layout.ts

@@ -141,6 +141,9 @@ export class LayoutHelper {
         this.hashMapAlpha = {};
         this.hashMapBeta = {};
         this.primaryHtmlNodeId = null;
+
+        // Reset dialog render state for new render cycle
+        dialogCustom.resetDialogRenderState();
     }
 
     public get = (hash) => {
@@ -462,24 +465,12 @@ export class LayoutHelper {
                     }
                 case "DIALOG":
                     {
-                        // Use custom module for dialog rendering
-                        let dialogElement = this.element(node.id) as HTMLDialogElement;
-                        dialogElement = dialogElement ? dialogElement : this.createElement(doc, node.tag) as HTMLDialogElement;
-                        if (!node.attributes) { node.attributes = {}; }
-
-                        // Extract render options before cleaning attributes
-                        const renderOptions = dialogCustom.getDialogRenderOptions(node.attributes, dialogElement);
-
-                        // TODO: Clean custom tracking attributes
-                        // node.attributes = dialogCustom.cleanDialogAttributes(node.attributes);
-                        // Set attributes and insert into DOM
-                        this.setAttributes(dialogElement, node);
+                        this.insertDefaultElement(node, parent, pivot, doc, insert);
                         
-                        insert(node, parent, dialogElement, pivot);
-
-                        // Render dialog with proper modal/non-modal handling
+                        const domElement = this.element(node.id) as HTMLDialogElement;
+                        const renderOptions = dialogCustom.getDialogRenderOptions(node.attributes, domElement);
                         dialogCustom.renderDialog(
-                            dialogElement,
+                            domElement,
                             renderOptions,
                             this.state.options.logerror
                         );

package/src/visualizer.ts

@@ -53,12 +53,12 @@ export class Visualizer implements VisualizerType {
         }
     }
 
-    public html = async (decoded: DecodedData.DecodedPayload[], target: Window, hash: string = null, useproxy?: LinkHandler, logerror?: ErrorLogger, shortCircuitStrategy: ShortCircuitStrategy = ShortCircuitStrategy.None): Promise<Visualizer> => {
+    public html = async (decoded: DecodedData.DecodedPayload[], target: Window, portalCanvas?: boolean, 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 });
+                await this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy, portalCanvas });
                 // 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, hash?: string, useproxy?: LinkHandler, logerror?: ErrorLogger, shortCircuitStrategy?: ShortCircuitStrategy) => Promise<Visualizer>;
+    html: (decoded: Data.DecodedPayload[], target: Window, portalCanvas?: boolean, 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,6 +65,7 @@ export interface Options {
     metadata?: HTMLElement;
     pointer?: boolean;
     canvas?: boolean;
+    portalCanvas?: boolean;
     keyframes?: boolean;
     mobile?: boolean;
     vNext?: boolean;