clarity-visualize 0.7.1 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/build/clarity.visualize.js +309 -228
  2. package/build/clarity.visualize.min.js +1 -1
  3. package/build/clarity.visualize.module.js +309 -228
  4. package/package.json +2 -2
  5. package/src/layout.ts +36 -17
  6. package/src/visualizer.ts +28 -22
  7. package/types/visualize.d.ts +6 -2
package/build/clarity.visualize.js CHANGED
@@ -1041,6 +1041,7 @@ var LayoutHelper = /** @class */ (function () {
1041
1041
  function LayoutHelper(state) {
1042
1042
  var _this = this;
1043
1043
  this.stylesheets = [];
1044
+ this.fonts = [];
1044
1045
  this.nodes = {};
1045
1046
  this.events = {};
1046
1047
  this.hashMapAlpha = {};
@@ -1049,6 +1050,7 @@ var LayoutHelper = /** @class */ (function () {
1049
1050
  this.reset = function () {
1050
1051
  _this.nodes = {};
1051
1052
  _this.stylesheets = [];
1053
+ _this.fonts = [];
1052
1054
  _this.events = {};
1053
1055
  _this.hashMapAlpha = {};
1054
1056
  _this.hashMapBeta = {};
@@ -1077,7 +1079,7 @@ var LayoutHelper = /** @class */ (function () {
1077
1079
  this.element = function (nodeId) {
1078
1080
  return nodeId !== null && nodeId > 0 && nodeId in _this.nodes ? _this.nodes[nodeId] : null;
1079
1081
  };
1080
- this.dom = function (event) { return __awaiter(_this, void 0, void 0, function () {
1082
+ this.dom = function (event, useproxy) { return __awaiter(_this, void 0, void 0, function () {
1081
1083
  var doc;
1082
1084
  return __generator(this, function (_a) {
1083
1085
  switch (_a.label) {
@@ -1087,11 +1089,9 @@ var LayoutHelper = /** @class */ (function () {
1087
1089
  if (!(doc && doc.documentElement)) return [3 /*break*/, 2];
1088
1090
  doc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1089
1091
  // Render all DOM events to reconstruct the page
1090
- this.markup(event);
1091
- // Wait on all stylesheets to finish loading
1092
- return [4 /*yield*/, Promise.all(this.stylesheets)];
1092
+ return [4 /*yield*/, this.markup(event, useproxy)];
1093
1093
  case 1:
1094
- // Wait on all stylesheets to finish loading
1094
+ // Render all DOM events to reconstruct the page
1095
1095
  _a.sent();
1096
1096
  // Toggle back the visibility of target window
1097
1097
  doc.documentElement.style.visibility = "visible" /* Constant.Visible */;
@@ -1110,160 +1110,189 @@ var LayoutHelper = /** @class */ (function () {
1110
1110
  }
1111
1111
  return false;
1112
1112
  };
1113
- this.markup = function (event) {
1114
- var data = event.data;
1115
- var type = event.event;
1116
- var doc = _this.state.window.document;
1117
- var _loop_1 = function (node) {
1118
- var parent_1 = _this.element(node.parent);
1119
- var pivot = _this.element(node.previous);
1120
- var insert = _this.insertAfter;
1121
- var tag = node.tag;
1122
- if (tag && tag.indexOf("iframe:" /* Layout.Constant.IFramePrefix */) === 0) {
1123
- tag = node.tag.substr("iframe:" /* Layout.Constant.IFramePrefix */.length);
1124
- }
1125
- switch (tag) {
1126
- case "*D" /* Layout.Constant.DocumentTag */:
1127
- var tagDoc = tag !== node.tag ? (parent_1 ? parent_1.contentDocument : null) : doc;
1128
- if (tagDoc && tagDoc === doc && type === 5 /* Data.Event.Discover */) {
1129
- _this.reset();
1130
- }
1131
- if (typeof XMLSerializer !== "undefined" && tagDoc) {
1132
- tagDoc.open();
1133
- tagDoc.write(new XMLSerializer().serializeToString(tagDoc.implementation.createDocumentType(node.attributes["name"], node.attributes["publicId"], node.attributes["systemId"])));
1134
- tagDoc.close();
1135
- }
1136
- break;
1137
- case "*P" /* Layout.Constant.PolyfillShadowDomTag */:
1138
- // In case of polyfill, map shadow dom to it's parent for rendering purposes
1139
- // All its children should be inserted as regular children to the parent node.
1140
- _this.nodes[node.id] = parent_1;
1141
- _this.addToHashMap(node, parent_1);
1142
- break;
1143
- case "*S" /* Layout.Constant.ShadowDomTag */:
1144
- if (parent_1) {
1145
- var shadowRoot = _this.element(node.id);
1146
- shadowRoot = shadowRoot ? shadowRoot : parent_1.attachShadow({ mode: "open" });
1147
- if ("style" in node.attributes) {
1148
- var shadowStyle = doc.createElement("style");
1149
- // Support for adoptedStyleSheet is limited and not available in all browsers.
1150
- // To ensure that we can replay session in any browser, we turn adoptedStyleSheets from recording
1151
- // into classic style tags at the playback time.
1152
- if (shadowRoot.firstChild && shadowRoot.firstChild.id === "clarity-adopted-style" /* Constant.AdoptedStyleSheet */) {
1153
- shadowStyle = shadowRoot.firstChild;
1154
- }
1155
- shadowStyle.id = "clarity-adopted-style" /* Constant.AdoptedStyleSheet */;
1156
- shadowStyle.textContent = node.attributes["style"];
1157
- shadowRoot.appendChild(shadowStyle);
1158
- }
1159
- _this.nodes[node.id] = shadowRoot;
1160
- _this.addToHashMap(node, shadowRoot);
1161
- }
1162
- break;
1163
- case "*T" /* Layout.Constant.TextTag */:
1164
- var textElement = _this.element(node.id);
1165
- textElement = textElement ? textElement : doc.createTextNode(null);
1166
- textElement.nodeValue = node.value;
1167
- insert(node, parent_1, textElement, pivot);
1168
- break;
1169
- case "*M" /* Layout.Constant.SuspendMutationTag */:
1170
- var suspendedElement = _this.element(node.id);
1171
- if (suspendedElement && suspendedElement.nodeType === Node.ELEMENT_NODE) {
1172
- suspendedElement.setAttribute("data-clarity-suspend" /* Constant.Suspend */, "" /* Layout.Constant.Empty */);
1173
- }
1174
- break;
1175
- case "HTML":
1176
- var htmlDoc = tag !== node.tag ? (parent_1 ? parent_1.contentDocument : null) : doc;
1177
- if (htmlDoc !== null) {
1178
- var docElement = _this.element(node.id);
1179
- if (docElement === null) {
1180
- var newDoc = htmlDoc.implementation.createHTMLDocument("" /* Layout.Constant.Empty */);
1181
- docElement = newDoc.documentElement;
1182
- var p = htmlDoc.importNode(docElement, true);
1183
- htmlDoc.replaceChild(p, htmlDoc.documentElement);
1184
- if (htmlDoc.head) {
1185
- htmlDoc.head.parentNode.removeChild(htmlDoc.head);
1186
- }
1187
- if (htmlDoc.body) {
1188
- htmlDoc.body.parentNode.removeChild(htmlDoc.body);
1189
- }
1113
+ this.markup = function (event, useproxy) { return __awaiter(_this, void 0, void 0, function () {
1114
+ var data, type, doc, _loop_1, this_1, _i, data_1, node;
1115
+ var _this = this;
1116
+ var _a, _b, _c;
1117
+ return __generator(this, function (_d) {
1118
+ switch (_d.label) {
1119
+ case 0:
1120
+ data = event.data;
1121
+ type = event.event;
1122
+ doc = this.state.window.document;
1123
+ _loop_1 = function (node) {
1124
+ var parent_1 = this_1.element(node.parent);
1125
+ var pivot = this_1.element(node.previous);
1126
+ var insert = this_1.insertAfter;
1127
+ var tag = node.tag;
1128
+ if (tag && tag.indexOf("iframe:" /* Layout.Constant.IFramePrefix */) === 0) {
1129
+ tag = node.tag.substr("iframe:" /* Layout.Constant.IFramePrefix */.length);
1190
1130
  }
1191
- _this.setAttributes(htmlDoc.documentElement, node);
1192
- // If we are still processing discover events, keep the markup hidden until we are done
1193
- if (type === 5 /* Data.Event.Discover */ && !parent_1) {
1194
- htmlDoc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1131
+ switch (tag) {
1132
+ case "*D" /* Layout.Constant.DocumentTag */:
1133
+ var tagDoc = tag !== node.tag ? (parent_1 ? parent_1.contentDocument : null) : doc;
1134
+ if (tagDoc && tagDoc === doc && type === 5 /* Data.Event.Discover */) {
1135
+ this_1.reset();
1136
+ }
1137
+ if (typeof XMLSerializer !== "undefined" && tagDoc) {
1138
+ tagDoc.open();
1139
+ tagDoc.write(new XMLSerializer().serializeToString(tagDoc.implementation.createDocumentType(node.attributes["name"], node.attributes["publicId"], node.attributes["systemId"])));
1140
+ tagDoc.close();
1141
+ }
1142
+ break;
1143
+ case "*P" /* Layout.Constant.PolyfillShadowDomTag */:
1144
+ // In case of polyfill, map shadow dom to it's parent for rendering purposes
1145
+ // All its children should be inserted as regular children to the parent node.
1146
+ this_1.nodes[node.id] = parent_1;
1147
+ this_1.addToHashMap(node, parent_1);
1148
+ break;
1149
+ case "*S" /* Layout.Constant.ShadowDomTag */:
1150
+ if (parent_1) {
1151
+ var shadowRoot = this_1.element(node.id);
1152
+ shadowRoot = shadowRoot ? shadowRoot : parent_1.attachShadow({ mode: "open" });
1153
+ if ("style" in node.attributes) {
1154
+ var shadowStyle = doc.createElement("style");
1155
+ // Support for adoptedStyleSheet is limited and not available in all browsers.
1156
+ // To ensure that we can replay session in any browser, we turn adoptedStyleSheets from recording
1157
+ // into classic style tags at the playback time.
1158
+ if (shadowRoot.firstChild && shadowRoot.firstChild.id === "clarity-adopted-style" /* Constant.AdoptedStyleSheet */) {
1159
+ shadowStyle = shadowRoot.firstChild;
1160
+ }
1161
+ shadowStyle.id = "clarity-adopted-style" /* Constant.AdoptedStyleSheet */;
1162
+ shadowStyle.textContent = node.attributes["style"];
1163
+ shadowRoot.appendChild(shadowStyle);
1164
+ }
1165
+ this_1.nodes[node.id] = shadowRoot;
1166
+ this_1.addToHashMap(node, shadowRoot);
1167
+ }
1168
+ break;
1169
+ case "*T" /* Layout.Constant.TextTag */:
1170
+ var textElement = this_1.element(node.id);
1171
+ textElement = textElement ? textElement : doc.createTextNode(null);
1172
+ textElement.nodeValue = node.value;
1173
+ insert(node, parent_1, textElement, pivot);
1174
+ break;
1175
+ case "*M" /* Layout.Constant.SuspendMutationTag */:
1176
+ var suspendedElement = this_1.element(node.id);
1177
+ if (suspendedElement && suspendedElement.nodeType === Node.ELEMENT_NODE) {
1178
+ suspendedElement.setAttribute("data-clarity-suspend" /* Constant.Suspend */, "" /* Layout.Constant.Empty */);
1179
+ }
1180
+ break;
1181
+ case "HTML":
1182
+ var htmlDoc = tag !== node.tag ? (parent_1 ? parent_1.contentDocument : null) : doc;
1183
+ if (htmlDoc !== null) {
1184
+ var docElement = this_1.element(node.id);
1185
+ if (docElement === null) {
1186
+ var newDoc = htmlDoc.implementation.createHTMLDocument("" /* Layout.Constant.Empty */);
1187
+ docElement = newDoc.documentElement;
1188
+ var p = htmlDoc.importNode(docElement, true);
1189
+ htmlDoc.replaceChild(p, htmlDoc.documentElement);
1190
+ if (htmlDoc.head) {
1191
+ htmlDoc.head.parentNode.removeChild(htmlDoc.head);
1192
+ }
1193
+ if (htmlDoc.body) {
1194
+ htmlDoc.body.parentNode.removeChild(htmlDoc.body);
1195
+ }
1196
+ }
1197
+ this_1.setAttributes(htmlDoc.documentElement, node);
1198
+ // If we are still processing discover events, keep the markup hidden until we are done
1199
+ if (type === 5 /* Data.Event.Discover */ && !parent_1) {
1200
+ htmlDoc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
1201
+ }
1202
+ this_1.nodes[node.id] = htmlDoc.documentElement;
1203
+ this_1.addToHashMap(node, htmlDoc.documentElement);
1204
+ }
1205
+ break;
1206
+ case "HEAD":
1207
+ var headElement = this_1.element(node.id);
1208
+ if (headElement === null) {
1209
+ headElement = doc.createElement(node.tag);
1210
+ if (node.attributes && "*B" /* Layout.Constant.Base */ in node.attributes) {
1211
+ var base = doc.createElement("base");
1212
+ base.href = node.attributes["*B" /* Layout.Constant.Base */];
1213
+ headElement.appendChild(base);
1214
+ }
1215
+ // Add custom styles to assist with visualization
1216
+ var custom = doc.createElement("style");
1217
+ custom.innerText = this_1.getCustomStyle();
1218
+ headElement.appendChild(custom);
1219
+ }
1220
+ this_1.setAttributes(headElement, node);
1221
+ insert(node, parent_1, headElement, pivot);
1222
+ break;
1223
+ case "LINK":
1224
+ var linkElement_1 = this_1.element(node.id);
1225
+ linkElement_1 = linkElement_1 ? linkElement_1 : this_1.createElement(doc, node.tag);
1226
+ if (!node.attributes) {
1227
+ node.attributes = {};
1228
+ }
1229
+ this_1.setAttributes(linkElement_1, node);
1230
+ if ("rel" in node.attributes) {
1231
+ if (node.attributes["rel"] === "stylesheet") {
1232
+ this_1.stylesheets.push(new Promise(function (resolve) {
1233
+ var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
1234
+ linkElement_1.href = proxy ? proxy(linkElement_1.href) : linkElement_1.href;
1235
+ linkElement_1.onload = linkElement_1.onerror = _this.style.bind(_this, linkElement_1, resolve);
1236
+ setTimeout(resolve, LayoutHelper.TIMEOUT);
1237
+ }));
1238
+ }
1239
+ else if ((node.attributes["rel"].includes("preload") || node.attributes["rel"].includes("preconnect"))
1240
+ && (((_a = node.attributes) === null || _a === void 0 ? void 0 : _a.as) === "style" || ((_b = node.attributes) === null || _b === void 0 ? void 0 : _b.as) === "font")) {
1241
+ this_1.fonts.push(new Promise(function (resolve) {
1242
+ var proxy = useproxy !== null && useproxy !== void 0 ? useproxy : _this.state.options.useproxy;
1243
+ linkElement_1.href = proxy ? proxy(linkElement_1.href) : linkElement_1.href;
1244
+ linkElement_1.onload = linkElement_1.onerror = _this.style.bind(_this, linkElement_1, resolve);
1245
+ setTimeout(resolve, LayoutHelper.TIMEOUT);
1246
+ }));
1247
+ }
1248
+ }
1249
+ insert(node, parent_1, linkElement_1, pivot);
1250
+ break;
1251
+ case "STYLE":
1252
+ var styleElement = (_c = this_1.element(node.id)) !== null && _c !== void 0 ? _c : doc.createElement(node.tag);
1253
+ this_1.setAttributes(styleElement, node);
1254
+ styleElement.textContent = node.value;
1255
+ insert(node, parent_1, styleElement, pivot);
1256
+ this_1.style(styleElement);
1257
+ break;
1258
+ case "IFRAME":
1259
+ var iframeElement = this_1.element(node.id);
1260
+ iframeElement = iframeElement ? iframeElement : this_1.createElement(doc, node.tag);
1261
+ if (!node.attributes) {
1262
+ node.attributes = {};
1263
+ }
1264
+ this_1.setAttributes(iframeElement, node);
1265
+ insert(node, parent_1, iframeElement, pivot);
1266
+ break;
1267
+ default:
1268
+ var domElement = this_1.element(node.id);
1269
+ domElement = domElement ? domElement : this_1.createElement(doc, node.tag);
1270
+ this_1.setAttributes(domElement, node);
1271
+ this_1.resize(domElement, node.width, node.height);
1272
+ insert(node, parent_1, domElement, pivot);
1273
+ break;
1195
1274
  }
1196
- _this.nodes[node.id] = htmlDoc.documentElement;
1197
- _this.addToHashMap(node, htmlDoc.documentElement);
1198
- }
1199
- break;
1200
- case "HEAD":
1201
- var headElement = _this.element(node.id);
1202
- if (headElement === null) {
1203
- headElement = doc.createElement(node.tag);
1204
- if (node.attributes && "*B" /* Layout.Constant.Base */ in node.attributes) {
1205
- var base = doc.createElement("base");
1206
- base.href = node.attributes["*B" /* Layout.Constant.Base */];
1207
- headElement.appendChild(base);
1275
+ // Track state for this node
1276
+ if (node.id) {
1277
+ this_1.events[node.id] = node;
1208
1278
  }
1209
- // Add custom styles to assist with visualization
1210
- var custom = doc.createElement("style");
1211
- custom.innerText = _this.getCustomStyle();
1212
- headElement.appendChild(custom);
1213
- }
1214
- _this.setAttributes(headElement, node);
1215
- insert(node, parent_1, headElement, pivot);
1216
- break;
1217
- case "LINK":
1218
- var linkElement_1 = _this.element(node.id);
1219
- linkElement_1 = linkElement_1 ? linkElement_1 : _this.createElement(doc, node.tag);
1220
- if (!node.attributes) {
1221
- node.attributes = {};
1222
- }
1223
- _this.setAttributes(linkElement_1, node);
1224
- if ("rel" in node.attributes && node.attributes["rel"] === "stylesheet") {
1225
- _this.stylesheets.push(new Promise(function (resolve) {
1226
- linkElement_1.onload = linkElement_1.onerror = _this.style.bind(_this, linkElement_1, resolve);
1227
- setTimeout(resolve, LayoutHelper.TIMEOUT);
1228
- }));
1279
+ };
1280
+ this_1 = this;
1281
+ for (_i = 0, data_1 = data; _i < data_1.length; _i++) {
1282
+ node = data_1[_i];
1283
+ _loop_1(node);
1229
1284
  }
1230
- insert(node, parent_1, linkElement_1, pivot);
1231
- break;
1232
- case "STYLE":
1233
- var styleElement = _this.element(node.id);
1234
- styleElement = styleElement ? styleElement : doc.createElement(node.tag);
1235
- _this.setAttributes(styleElement, node);
1236
- styleElement.textContent = node.value;
1237
- insert(node, parent_1, styleElement, pivot);
1238
- _this.style(styleElement);
1239
- break;
1240
- case "IFRAME":
1241
- var iframeElement = _this.element(node.id);
1242
- iframeElement = iframeElement ? iframeElement : _this.createElement(doc, node.tag);
1243
- if (!node.attributes) {
1244
- node.attributes = {};
1245
- }
1246
- _this.setAttributes(iframeElement, node);
1247
- insert(node, parent_1, iframeElement, pivot);
1248
- break;
1249
- default:
1250
- var domElement = _this.element(node.id);
1251
- domElement = domElement ? domElement : _this.createElement(doc, node.tag);
1252
- _this.setAttributes(domElement, node);
1253
- _this.resize(domElement, node.width, node.height);
1254
- insert(node, parent_1, domElement, pivot);
1255
- break;
1256
- }
1257
- // Track state for this node
1258
- if (node.id) {
1259
- _this.events[node.id] = node;
1285
+ // Wait on all stylesheets and fonts to finish loading
1286
+ return [4 /*yield*/, Promise.all([this.stylesheets, this.fonts])];
1287
+ case 1:
1288
+ // Wait on all stylesheets and fonts to finish loading
1289
+ _d.sent();
1290
+ this.stylesheets = [];
1291
+ this.fonts = [];
1292
+ return [2 /*return*/];
1260
1293
  }
1261
- };
1262
- for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
1263
- var node = data_1[_i];
1264
- _loop_1(node);
1265
- }
1266
- };
1294
+ });
1295
+ }); };
1267
1296
  this.style = function (node, resolve) {
1268
1297
  if (resolve === void 0) { resolve = null; }
1269
1298
  // Firefox throws a SecurityError when trying to access cssRules of a stylesheet from a different domain
@@ -1278,7 +1307,11 @@ var LayoutHelper = /** @class */ (function () {
1278
1307
  }
1279
1308
  }
1280
1309
  }
1281
- catch ( /* do nothing */_a) { /* do nothing */ }
1310
+ catch (e) {
1311
+ if (_this.state.options.logerror) {
1312
+ _this.state.options.logerror(e);
1313
+ }
1314
+ }
1282
1315
  if (resolve) {
1283
1316
  resolve();
1284
1317
  }
@@ -1386,7 +1419,7 @@ var LayoutHelper = /** @class */ (function () {
1386
1419
  }
1387
1420
  }
1388
1421
  }
1389
- if (sameorigin === false && tag === "iframe" /* Constant.IFrameTag */ && typeof node.setAttribute == "function" /* Constant.Function */) {
1422
+ if (sameorigin === false && tag === "iframe" /* Constant.IFrameTag */ && typeof node.setAttribute === "function" /* Constant.Function */) {
1390
1423
  node.setAttribute("data-clarity-unavailable" /* Constant.Unavailable */, "" /* Layout.Constant.Empty */);
1391
1424
  }
1392
1425
  // Add an empty ALT tag on all IMG elements
@@ -1432,30 +1465,53 @@ var Visualizer = /** @class */ (function () {
1432
1465
  });
1433
1466
  }); };
1434
1467
  this.get = function (hash) {
1435
- return _this.layout.get(hash);
1468
+ var _a;
1469
+ return (_a = _this.layout) === null || _a === void 0 ? void 0 : _a.get(hash);
1436
1470
  };
1437
- this.html = function (decoded, target, hash, time) {
1471
+ this.html = function (decoded, target, hash, time, useproxy, logerror) {
1438
1472
  if (hash === void 0) { hash = null; }
1439
- if (decoded && decoded.length > 0 && target) {
1440
- // Flatten the payload and parse all events out of them, sorted by time
1441
- var merged = _this.merge(decoded);
1442
- _this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom });
1443
- // Render all mutations on top of the initial markup
1444
- while (merged.events.length > 0 && _this.layout.exists(hash) === false) {
1445
- var entry = merged.events.shift();
1446
- switch (entry.event) {
1447
- case 6 /* Data.Event.Mutation */:
1448
- var domEvent = entry;
1449
- _this.renderTime = domEvent.time;
1450
- if (time && _this.renderTime > time) {
1451
- break;
1473
+ return __awaiter(_this, void 0, void 0, function () {
1474
+ var merged, entry, _a, domEvent, e_1;
1475
+ return __generator(this, function (_b) {
1476
+ switch (_b.label) {
1477
+ case 0:
1478
+ if (!(decoded && decoded.length > 0 && target)) return [3 /*break*/, 8];
1479
+ _b.label = 1;
1480
+ case 1:
1481
+ _b.trys.push([1, 7, , 8]);
1482
+ merged = this.merge(decoded);
1483
+ this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy: useproxy });
1484
+ _b.label = 2;
1485
+ case 2:
1486
+ if (!(merged.events.length > 0 && this.layout.exists(hash) === false)) return [3 /*break*/, 6];
1487
+ entry = merged.events.shift();
1488
+ _a = entry.event;
1489
+ switch (_a) {
1490
+ case 6 /* Data.Event.Mutation */: return [3 /*break*/, 3];
1491
+ }
1492
+ return [3 /*break*/, 5];
1493
+ case 3:
1494
+ domEvent = entry;
1495
+ this.renderTime = domEvent.time;
1496
+ if (time && this.renderTime > time) {
1497
+ return [3 /*break*/, 5];
1452
1498
  }
1453
- _this.layout.markup(domEvent);
1454
- break;
1499
+ return [4 /*yield*/, this.layout.markup(domEvent, useproxy)];
1500
+ case 4:
1501
+ _b.sent();
1502
+ return [3 /*break*/, 5];
1503
+ case 5: return [3 /*break*/, 2];
1504
+ case 6: return [3 /*break*/, 8];
1505
+ case 7:
1506
+ e_1 = _b.sent();
1507
+ if (logerror) {
1508
+ logerror(e_1);
1509
+ }
1510
+ return [3 /*break*/, 8];
1511
+ case 8: return [2 /*return*/, this];
1455
1512
  }
1456
- }
1457
- }
1458
- return _this;
1513
+ });
1514
+ });
1459
1515
  };
1460
1516
  this.time = function () {
1461
1517
  return _this.renderTime;
@@ -1532,62 +1588,87 @@ var Visualizer = /** @class */ (function () {
1532
1588
  _this.interaction = new InteractionHelper(_this.state, _this.layout);
1533
1589
  // If discover event was passed, render it now
1534
1590
  if (options.dom) {
1535
- _this.layout.dom(options.dom);
1591
+ _this.layout.dom(options.dom, options.useproxy);
1536
1592
  }
1537
1593
  return _this;
1538
1594
  };
1539
- this.render = function (events) {
1540
- if (_this.state === null) {
1541
- throw new Error("Initialize visualization by calling \"setup\" prior to making this call.");
1542
- }
1543
- var time = 0;
1544
- for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
1545
- var entry = events_1[_i];
1546
- time = entry.time;
1547
- switch (entry.event) {
1548
- case 0 /* Data.Event.Metric */:
1549
- _this.data.metric(entry);
1550
- break;
1551
- case 7 /* Data.Event.Region */:
1552
- _this.data.region(entry);
1553
- break;
1554
- case 6 /* Data.Event.Mutation */:
1555
- _this.layout.markup(entry);
1556
- break;
1557
- case 13 /* Data.Event.MouseDown */:
1558
- case 14 /* Data.Event.MouseUp */:
1559
- case 12 /* Data.Event.MouseMove */:
1560
- case 15 /* Data.Event.MouseWheel */:
1561
- case 9 /* Data.Event.Click */:
1562
- case 16 /* Data.Event.DoubleClick */:
1563
- case 17 /* Data.Event.TouchStart */:
1564
- case 20 /* Data.Event.TouchCancel */:
1565
- case 18 /* Data.Event.TouchEnd */:
1566
- case 19 /* Data.Event.TouchMove */:
1567
- _this.interaction.pointer(entry);
1568
- break;
1569
- case 28 /* Data.Event.Visibility */:
1570
- _this.interaction.visibility(entry);
1571
- break;
1572
- case 27 /* Data.Event.Input */:
1573
- _this.interaction.input(entry);
1574
- break;
1575
- case 21 /* Data.Event.Selection */:
1576
- _this.interaction.selection(entry);
1577
- break;
1578
- case 11 /* Data.Event.Resize */:
1579
- _this.interaction.resize(entry);
1580
- break;
1581
- case 10 /* Data.Event.Scroll */:
1582
- _this.interaction.scroll(entry);
1583
- break;
1595
+ this.render = function (events) { return __awaiter(_this, void 0, void 0, function () {
1596
+ var time, _i, events_1, entry, _a;
1597
+ return __generator(this, function (_b) {
1598
+ switch (_b.label) {
1599
+ case 0:
1600
+ if (this.state === null) {
1601
+ throw new Error("Initialize visualization by calling \"setup\" prior to making this call.");
1602
+ }
1603
+ time = 0;
1604
+ _i = 0, events_1 = events;
1605
+ _b.label = 1;
1606
+ case 1:
1607
+ if (!(_i < events_1.length)) return [3 /*break*/, 13];
1608
+ entry = events_1[_i];
1609
+ time = entry.time;
1610
+ _a = entry.event;
1611
+ switch (_a) {
1612
+ case 0 /* Data.Event.Metric */: return [3 /*break*/, 2];
1613
+ case 7 /* Data.Event.Region */: return [3 /*break*/, 3];
1614
+ case 6 /* Data.Event.Mutation */: return [3 /*break*/, 4];
1615
+ case 13 /* Data.Event.MouseDown */: return [3 /*break*/, 6];
1616
+ case 14 /* Data.Event.MouseUp */: return [3 /*break*/, 6];
1617
+ case 12 /* Data.Event.MouseMove */: return [3 /*break*/, 6];
1618
+ case 15 /* Data.Event.MouseWheel */: return [3 /*break*/, 6];
1619
+ case 9 /* Data.Event.Click */: return [3 /*break*/, 6];
1620
+ case 16 /* Data.Event.DoubleClick */: return [3 /*break*/, 6];
1621
+ case 17 /* Data.Event.TouchStart */: return [3 /*break*/, 6];
1622
+ case 20 /* Data.Event.TouchCancel */: return [3 /*break*/, 6];
1623
+ case 18 /* Data.Event.TouchEnd */: return [3 /*break*/, 6];
1624
+ case 19 /* Data.Event.TouchMove */: return [3 /*break*/, 6];
1625
+ case 28 /* Data.Event.Visibility */: return [3 /*break*/, 7];
1626
+ case 27 /* Data.Event.Input */: return [3 /*break*/, 8];
1627
+ case 21 /* Data.Event.Selection */: return [3 /*break*/, 9];
1628
+ case 11 /* Data.Event.Resize */: return [3 /*break*/, 10];
1629
+ case 10 /* Data.Event.Scroll */: return [3 /*break*/, 11];
1630
+ }
1631
+ return [3 /*break*/, 12];
1632
+ case 2:
1633
+ this.data.metric(entry);
1634
+ return [3 /*break*/, 12];
1635
+ case 3:
1636
+ this.data.region(entry);
1637
+ return [3 /*break*/, 12];
1638
+ case 4: return [4 /*yield*/, this.layout.markup(entry)];
1639
+ case 5:
1640
+ _b.sent();
1641
+ return [3 /*break*/, 12];
1642
+ case 6:
1643
+ this.interaction.pointer(entry);
1644
+ return [3 /*break*/, 12];
1645
+ case 7:
1646
+ this.interaction.visibility(entry);
1647
+ return [3 /*break*/, 12];
1648
+ case 8:
1649
+ this.interaction.input(entry);
1650
+ return [3 /*break*/, 12];
1651
+ case 9:
1652
+ this.interaction.selection(entry);
1653
+ return [3 /*break*/, 12];
1654
+ case 10:
1655
+ this.interaction.resize(entry);
1656
+ return [3 /*break*/, 12];
1657
+ case 11:
1658
+ this.interaction.scroll(entry);
1659
+ return [3 /*break*/, 12];
1660
+ case 12:
1661
+ _i++;
1662
+ return [3 /*break*/, 1];
1663
+ case 13:
1664
+ if (events.length > 0) {
1665
+ // Update pointer trail at the end of every frame
1666
+ this.interaction.trail(time);
1667
+ }
1668
+ return [2 /*return*/];
1584
1669
  }
1585
- }
1586
- if (events.length > 0) {
1587
- // Update pointer trail at the end of every frame
1588
- _this.interaction.trail(time);
1589
- }
1590
- };
1670
+ });
1671
+ }); };
1591
1672
  this.reset = function () {
1592
1673
  var _a, _b, _c, _d, _e;
1593
1674
  (_a = _this.data) === null || _a === void 0 ? void 0 : _a.reset();