Fix screenshot services using wrong viewport dimensions when designerWidth/Height != 100%

Both DisplayMediaPngWriterService and ElectronPngWriterService used
canvas.offsetWidth/Height for tile viewport sizing but captured from
outercanvas2. When designerWidth/Height > 100%, the canvas element is
larger than the actual capture viewport, causing screenshots to contain
only a fraction of the element. Fix by using outercanvas2.offsetWidth/Height
which matches the actual visible capture area.

Co-authored-by: jogibear9988 <364896+jogibear9988@users.noreply.github.com>
Agent-Logs-Url: https://github.com/node-projects/web-component-designer/sessions/76a14e97-53dd-48d1-9442-f68292307d18

Author: Copilot

packages/web-component-designer/src/elements/services/pngCreatorService/DisplayMediaPngWriterService.ts

@@ -45,8 +45,13 @@ export class DisplayMediaPngWriterService implements IPngCreatorService {
             const totalWidth = Math.ceil(maxX - minX);
             const totalHeight = Math.ceil(maxY - minY);
 
-            const viewportW = designerCanvas.canvas.offsetWidth;
-            const viewportH = designerCanvas.canvas.offsetHeight;
+            // Use the outer viewport element for screenshots so that the crop
+            // coordinates are not affected by the canvasOffset CSS transform.
+            // Its dimensions reflect the actual visible capture area, which may
+            // differ from canvas.offsetWidth when designerWidth/Height != 100%.
+            const viewportElement = (<DesignerCanvas>designerCanvas).outercanvas2;
+            const viewportW = viewportElement.offsetWidth;
+            const viewportH = viewportElement.offsetHeight;
 
             // Inset by 1 CSS pixel on each edge to avoid border artifacts when stitching tiles
             const borderInset = 1;
@@ -68,10 +73,6 @@ export class DisplayMediaPngWriterService implements IPngCreatorService {
             finalCanvas.height = Math.ceil(totalHeight * dpr);
             const finalCtx = finalCanvas.getContext('2d');
 
-            // Use the outer viewport element for screenshots so that the crop
-            // coordinates are not affected by the canvasOffset CSS transform
-            const viewportElement = (<DesignerCanvas>designerCanvas).outercanvas2;
-
             let sleepTime = 1000;
 
             for (let iy = 0; iy < numTilesY; iy++) {

packages/web-component-designer/src/elements/services/pngCreatorService/ElectronPngWriterService.ts

@@ -75,8 +75,13 @@ export class ElectronPngWriterService implements IPngCreatorService {
             const totalWidth = Math.ceil(maxX - minX);
             const totalHeight = Math.ceil(maxY - minY);
 
-            const viewportW = designerCanvas.canvas.offsetWidth;
-            const viewportH = designerCanvas.canvas.offsetHeight;
+            // Use the outer viewport element to determine the capture rectangle
+            // so that coordinates are not affected by the canvasOffset CSS transform.
+            // Its dimensions reflect the actual visible capture area, which may
+            // differ from canvas.offsetWidth when designerWidth/Height != 100%.
+            const viewportElement = (<DesignerCanvas>designerCanvas).outercanvas2;
+            const viewportW = viewportElement.offsetWidth;
+            const viewportH = viewportElement.offsetHeight;
 
             // Inset by 1 CSS pixel on each edge to avoid border artifacts when stitching tiles
             const borderInset = 1;
@@ -98,10 +103,6 @@ export class ElectronPngWriterService implements IPngCreatorService {
             finalCanvas.height = Math.ceil(totalHeight * dpr);
             const finalCtx = finalCanvas.getContext('2d');
 
-            // Use the outer viewport element to determine the capture rectangle
-            // so that coordinates are not affected by the canvasOffset CSS transform
-            const viewportElement = (<DesignerCanvas>designerCanvas).outercanvas2;
-
             for (let iy = 0; iy < numTilesY; iy++) {
                 for (let ix = 0; ix < numTilesX; ix++) {
                     const tileX = minX + ix * effectiveW;