@gemx-dev/clarity-visualize 0.8.56 → 0.8.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemx-dev/clarity-visualize",
-  "version": "0.8.56",
+  "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.56"
+    "@gemx-dev/clarity-decode": "^0.8.57"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

package/src/custom/canvas-layer.ts

@@ -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);

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;