@gemx-dev/clarity-visualize 0.8.57 → 0.8.59

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)) {
@@ -401,7 +401,8 @@ function createParentWindowCanvas(iframeDoc) {
         var parentDoc = parentWindow === null || parentWindow === void 0 ? void 0 : parentWindow.document;
         if (!parentDoc)
             throw new Error('Parent document not found');
-        var iframe = parentDoc.getElementById('clarity-iframe');
+        var iframeId = "clarity-iframe-".concat(portalCanvasId);
+        var iframe = parentDoc.getElementById(iframeId);
         if (!iframe)
             throw new Error('Iframe not found');
         var targetIframe = iframe;
@@ -409,10 +410,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 +797,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 +938,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 +954,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 +965,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 +2344,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 +2357,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.57",
+  "version": "0.8.59",
   "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.57"
+    "@gemx-dev/clarity-decode": "^0.8.59"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

package/src/custom/canvas-layer.ts

@@ -41,7 +41,8 @@ export function createParentWindowCanvas(
         const parentDoc = parentWindow?.document;
         if (!parentDoc) throw new Error('Parent document not found');
 
-        const iframe = parentDoc.getElementById('clarity-iframe');
+        const iframeId = `clarity-iframe-${portalCanvasId}`;
+        const iframe = parentDoc.getElementById(iframeId);
         if (!iframe) throw new Error('Iframe not found');
 
         const targetIframe = iframe as HTMLIFrameElement;
@@ -289,7 +290,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,