Skip to content

Fix screenshot services using wrong viewport dimensions when designerWidth/Height ≠ 100%#461

Merged
jogibear9988 merged 2 commits intomasterfrom
copilot/fix-screenshot-service-issue
Mar 20, 2026
Merged

Fix screenshot services using wrong viewport dimensions when designerWidth/Height ≠ 100%#461
jogibear9988 merged 2 commits intomasterfrom
copilot/fix-screenshot-service-issue

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 20, 2026

Both DisplayMediaPngWriterService and ElectronPngWriterService computed tile dimensions from designerCanvas.canvas.offsetWidth/Height, but captured from outercanvas2. When designerWidth is e.g. 200%, the inner canvas is 2× the capture viewport, so each tile covers only half the expected area—producing a screenshot of half the element with a 1px border artifact.

  • Use outercanvas2.offsetWidth/Height for viewport dimensions, matching the element actually used for capture
-            const viewportW = designerCanvas.canvas.offsetWidth;
-            const viewportH = designerCanvas.canvas.offsetHeight;
+            const viewportElement = (<DesignerCanvas>designerCanvas).outercanvas2;
+            const viewportW = viewportElement.offsetWidth;
+            const viewportH = viewportElement.offsetHeight;

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

…Width/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
Copilot AI changed the title [WIP] Fix screenshot issue with DisplayMediaPngWriterService Fix screenshot services using wrong viewport dimensions when designerWidth/Height ≠ 100% Mar 20, 2026
Copilot AI requested a review from jogibear9988 March 20, 2026 22:31
@jogibear9988 jogibear9988 marked this pull request as ready for review March 20, 2026 22:38
@jogibear9988 jogibear9988 merged commit 2464e46 into master Mar 20, 2026
@jogibear9988 jogibear9988 deleted the copilot/fix-screenshot-service-issue branch March 20, 2026 22:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants