PB-341: Save content as template

- Improve jumps when taking screenshot

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

@@ -212,11 +212,11 @@
     }
 
     .pagebuilder-canvas {
-        -moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out, padding-top .35s ease-in-out;
-        -webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out, padding-top .35s ease-in-out;
+        -moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
+        -webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         opacity: 0;
         padding-bottom: 120px;
-        transition: opacity .75s ease-in-out, visibility .75s ease-in-out, padding-top .35s ease-in-out;
+        transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         visibility: hidden;
 
         &.active {

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_template-manager.less

@@ -9,7 +9,9 @@
 //  ______________________________________________________________________
 
 .pagebuilder-stage.capture .pagebuilder-canvas {
+    margin: -10px;
     padding: 10px;
+    transition: none;
 
     .pagebuilder-content-type {
         border: 0 !important;
@@ -42,6 +44,11 @@
     }
 }
 
+.pagebuilder-stage-wrapper.stage-full-screen .pagebuilder-stage.capture .pagebuilder-canvas {
+    margin-top: 20px;
+    padding-top: 10px;
+}
+
 //
 //  Style modal and grid slide out panel
 //  ______________________________________________________________________

app/code/Magento/PageBuilder/view/adminhtml/web/js/template-manager.js

@@ -126,37 +126,47 @@ function refreshGrid() {
  * @param stage
  */
 function createCapture(stage: Stage) {
-    const stageElement = document.querySelector("#" + stage.id);
     const scrollY = window.scrollY;
+    const stageElement = document.querySelector("#" + stage.id) as HTMLElement;
     const deferred = $.Deferred();
 
     // Resolve issues with Parallax
     const parallaxRestore = disableParallax(stageElement);
 
+    stageElement.style.height = $(stageElement).outerHeight(false) + "px";
     stageElement.classList.add("capture");
     stageElement.classList.add("interacting");
-    window.scrollTo({
-        top: 0,
-    });
-
-    html2canvas(
-        document.querySelector("#" + stage.id + " .pagebuilder-canvas"),
-        {
-            scale: 1,
-            useCORS: true,
-        },
-    ).then((canvas: HTMLCanvasElement) => {
-        const imageSrc = canvas.toDataURL("image/jpeg", 0.85);
-
-        deferred.resolve(imageSrc);
 
+    if (stage.pageBuilder.isFullScreen()) {
         window.scrollTo({
-            top: scrollY,
+            top: 0,
         });
+    }
 
-        stageElement.classList.remove("capture");
-        stageElement.classList.remove("interacting");
-        restoreParallax(parallaxRestore);
+    _.defer(() => {
+        html2canvas(
+            document.querySelector("#" + stage.id + " .pagebuilder-canvas"),
+            {
+                scale: 1,
+                useCORS: true,
+                scrollY: (window.pageYOffset * -1),
+            },
+        ).then((canvas: HTMLCanvasElement) => {
+            const imageSrc = canvas.toDataURL("image/jpeg", 0.85);
+
+            deferred.resolve(imageSrc);
+
+            if (stage.pageBuilder.isFullScreen()) {
+                window.scrollTo({
+                    top: scrollY,
+                });
+            }
+
+            stageElement.style.height = null;
+            stageElement.classList.remove("capture");
+            stageElement.classList.remove("interacting");
+            restoreParallax(parallaxRestore);
+        });
     });
 
     return deferred;