@gemx-dev/clarity-visualize 0.8.56 → 0.8.58

package/build/clarity.visualize.module.js

@@ -390,7 +390,7 @@ var EnrichHelper = /** @class */ (function () {
  * @param canvasId - ID for the canvas element
  * @returns Canvas info with cleanup function
  */
-function createParentWindowCanvas(iframeDoc) {
+function createParentWindowCanvas(iframeDoc, portalCanvasId) {
     var _a, _b;
     // Check if we're inside an iframe
     if (iframeDoc.defaultView === ((_a = iframeDoc.defaultView) === null || _a === void 0 ? void 0 : _a.top)) {
@@ -409,10 +409,11 @@ function createParentWindowCanvas(iframeDoc) {
         if (!iframeParent)
             throw new Error('Iframe parent not found');
         // Create canvas as sibling to iframe
-        var canvas_1 = parentDoc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
+        var canvasId = "".concat("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */, "-").concat(portalCanvasId);
+        var canvas_1 = parentDoc.getElementById(canvasId);
         if (canvas_1 === null) {
             canvas_1 = parentDoc.createElement('canvas');
-            canvas_1.id = "clarity-heatmap-canvas" /* Constant.HeatmapCanvas */;
+            canvas_1.id = canvasId;
             canvas_1.width = 0;
             canvas_1.height = 0;
             canvas_1.style.position = "absolute" /* Constant.Absolute */;
@@ -795,7 +796,7 @@ var HeatmapHelper = /** @class */ (function () {
             var doc = _this.state.window.document;
             var win = _this.state.window;
             var de = doc.documentElement;
-            var isPortalCanvas = _this.state.options.portalCanvas;
+            var isPortalCanvas = !!_this.state.options.portalCanvasId;
             if (isPortalCanvas)
                 return _this.createPortalCanvas(doc, win, de);
             var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
@@ -936,7 +937,7 @@ var HeatmapHelper = /** @class */ (function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        isPortalCanvas = this.state.options.portalCanvas;
+                        isPortalCanvas = !!this.state.options.portalCanvasId;
                         if (!isPortalCanvas)
                             return [2 /*return*/];
                         return [4 /*yield*/, waitForDialogsRendered()];
@@ -952,7 +953,7 @@ var HeatmapHelper = /** @class */ (function () {
             try {
                 canvas = (_a = _this.parentCanvasInfo) === null || _a === void 0 ? void 0 : _a.canvas;
                 if (!canvas) {
-                    _this.parentCanvasInfo = createParentWindowCanvas(doc);
+                    _this.parentCanvasInfo = createParentWindowCanvas(doc, _this.state.options.portalCanvasId);
                     canvas = _this.parentCanvasInfo.canvas;
                     // Add event listeners only once when canvas is created
                     win.addEventListener("scroll", _this.redraw, true);
@@ -963,7 +964,7 @@ var HeatmapHelper = /** @class */ (function () {
                     }
                 }
                 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("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
@@ -2342,7 +2343,7 @@ var Visualizer = /** @class */ (function () {
                     return false;
             }
         };
-        this.html = function (decoded, target, portalCanvas, hash, useproxy, logerror, shortCircuitStrategy) {
+        this.html = function (decoded, target, portalCanvasId, hash, useproxy, logerror, shortCircuitStrategy) {
             if (hash === void 0) { hash = null; }
             if (shortCircuitStrategy === void 0) { shortCircuitStrategy = 0 /* ShortCircuitStrategy.None */; }
             return __awaiter(_this, void 0, void 0, function () {
@@ -2355,7 +2356,7 @@ var Visualizer = /** @class */ (function () {
                         case 1:
                             _b.trys.push([1, 10, , 11]);
                             merged = this.merge(decoded);
-                            return [4 /*yield*/, this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy: useproxy, portalCanvas: portalCanvas })];
+                            return [4 /*yield*/, this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy: useproxy, portalCanvasId: portalCanvasId })];
                         case 2:
                             _b.sent();
                             _b.label = 3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemx-dev/clarity-visualize",
-  "version": "0.8.56",
+  "version": "0.8.58",
   "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.58"
   },
   "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;
@@ -286,7 +289,7 @@ export function applyBestCanvasStrategy(
 
     // Strategy 1: Parent window canvas (best for iframe contexts)
     if (selectedStrategy === 'auto' || selectedStrategy === 'parent-window') {
-        const parentCanvas = createParentWindowCanvas(doc);
+        const parentCanvas = createParentWindowCanvas(doc, canvasId);
         if (parentCanvas) {
             return {
                 canvas: parentCanvas.canvas,

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;