Merge pull request #45 from GleapSDK/canvasScale

Fixed canvas when too big

Author: boehlerlukas

build/cjs/index.js

@@ -259,36 +259,7 @@ <h2 class="sub-headline">
   <div class="header-container-image">
     <img class="head-image" src="./pexels-niklas-jeromin-12734294.jpg" />
   </div>
-  <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>
-
-  <script>
-    var canvas = document.getElementById('myCanvas');
-    var ctx = canvas.getContext('2d');
-    var centerX = canvas.width / 2;
-    var centerY = canvas.height / 2;
-    var radius = 70;
-
-    ctx.beginPath();
-    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-    ctx.fillStyle = 'blue';
-    ctx.fill();
-    ctx.stroke();
-  </script>
-
-  <!-- The Modal -->
-  <div id="myModal" class="modal">
-
-    <!-- Modal content -->
-    <div class="modal-content">
-      <span class="close">&times;</span>
-      <p>Some text in the Modal..</p>
-    </div>
-
-  </div>
-
   <div class="content" id="haha">
-    <button id="myBtn222">Open Modal</button>
-    <a href="https://www.google.com">asdf asfasdfasfdasdf</a>
     <div class="skeleton-text"></div>
     <div class="skeleton-text"></div>
     <div class="skeleton-text"></div>
@@ -297,35 +268,6 @@ <h2 class="sub-headline">
     <div class="skeleton-text"></div>
     <div class="skeleton-text"></div>
   </div>
-
-  <script>
-    // Get the modal
-    var modal = document.getElementById("myModal");
-
-    // Get the button that opens the modal
-    var btn = document.getElementById("myBtn");
-
-    // Get the <span> element that closes the modal
-    var span = document.getElementsByClassName("close")[0];
-
-    // When the user clicks the button, open the modal 
-    btn.onclick = function () {
-      modal.style.display = "block";
-    }
-
-    // When the user clicks on <span> (x), close the modal
-    span.onclick = function () {
-      modal.style.display = "none";
-    }
-
-    // When the user clicks anywhere outside of the modal, close it
-    window.onclick = function (event) {
-      if (event.target == modal) {
-        modal.style.display = "none";
-      }
-    }
-
-  </script>
 </body>
 
 </html>

build/esm/index.mjs

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "13.7.6",
+  "version": "13.7.7",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.mjs",
   "exports": {

demo/index.html

@@ -212,7 +212,7 @@ const replaceStyleNodes = (clone, styleSheet, cssTextContent, styleId) => {
           cloneTargetNode.remove();
         }
       }
-    } catch (exp) { }
+    } catch (exp) {}
   }
 };
 
@@ -224,7 +224,7 @@ const getTextContentFromStyleSheet = (styleSheet) => {
     } else if (styleSheet.rules) {
       cssRules = styleSheet.rules;
     }
-  } catch (exp) { }
+  } catch (exp) {}
 
   var cssTextContent = "";
   if (cssRules) {
@@ -236,15 +236,15 @@ const getTextContentFromStyleSheet = (styleSheet) => {
   }
 
   return cssTextContent;
-}
+};
 
 const downloadAllCSSUrlResources = (clone, remote) => {
   var promises = [];
   for (var i = 0; i < document.styleSheets.length; i++) {
     const styleSheet = document.styleSheets[i];
 
     // Skip if the stylesheet is meant for print
-    if (styleSheet.media && styleSheet.media.mediaText === 'print') {
+    if (styleSheet.media && styleSheet.media.mediaText === "print") {
       continue;
     }
 
@@ -349,12 +349,12 @@ const handleAdoptedStyleSheets = (doc, clone, shadowNodeId) => {
       clone.insertBefore(shadowStyleNode, clone.firstElementChild);
     }
   }
-}
+};
 
 const deepClone = (host) => {
   let shadowNodeId = 1;
 
-  const cloneNode = (node, parent, shadowRoot) => {
+  const cloneNode = async (node, parent, shadowRoot) => {
     const walkTree = (nextn, nextp, innerShadowRoot) => {
       while (nextn) {
         cloneNode(nextn, nextp, innerShadowRoot);
@@ -371,7 +371,12 @@ const deepClone = (host) => {
 
       if (node instanceof HTMLCanvasElement) {
         try {
-          clone.setAttribute("bb-canvas-data", resizeImage(node.toDataURL(), 750, 750));
+          const boundingRect = node.getBoundingClientRect();
+          const resizedImage = await resizeImage(node.toDataURL(), 900, 900);
+          
+          clone.setAttribute("bb-canvas-data", resizedImage);
+          clone.setAttribute("bb-canvas-height", boundingRect.height);
+          clone.setAttribute("bb-canvas-width", boundingRect.width);
         } catch (exp) {
           console.warn("Gleap: Failed to clone canvas data.", exp);
         }
@@ -393,7 +398,7 @@ const deepClone = (host) => {
         clone.setAttribute("bb-width", boundingRect.width);
       }
 
-      if ((node.scrollTop > 0 || node.scrollLeft > 0)) {
+      if (node.scrollTop > 0 || node.scrollLeft > 0) {
         clone.setAttribute("bb-scrollpos", true);
         clone.setAttribute("bb-scrolltop", node.scrollTop);
         clone.setAttribute("bb-scrollleft", node.scrollLeft);
@@ -407,7 +412,7 @@ const deepClone = (host) => {
         var val = node.value;
         if (
           node.getAttribute("gleap-ignore") === "value" ||
-          node.classList.contains('gl-mask')
+          node.classList.contains("gl-mask")
         ) {
           val = new Array(val.length + 1).join("*");
         }
@@ -494,7 +499,10 @@ const prepareScreenshotData = (remote) => {
     }
 
     // Adjust the base node
-    const baseUrl = window.location.href.substring(0, window.location.href.lastIndexOf("/"));
+    const baseUrl = window.location.href.substring(
+      0,
+      window.location.href.lastIndexOf("/")
+    );
     var newBaseUrl = baseUrl + "/";
     if (existingBasePath) {
       if (existingBasePath.startsWith("http")) {