@gemx-dev/clarity-visualize 0.8.57 → 0.8.59

package/build/clarity.visualize.js

@@ -392,7 +392,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)) {
@@ -403,7 +403,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;
@@ -411,10 +412,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 */;
@@ -797,7 +799,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 */);
@@ -938,7 +940,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()];
@@ -954,7 +956,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);
@@ -965,7 +967,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);
@@ -2344,7 +2346,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 () {
@@ -2357,7 +2359,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;