microsoft / microsoft/pxt

Code Screenshots are slightly cropped

Open
#8,749 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.3k
Forks
641
Avg merge
12h 4m
Merged PRs (30d)
57

Description

Bug Template

Describe the bug
When you create an image of your code, the blocks on the edge are all a little cropped.
It's not that much visible, but when you try to upscale the images you will see it.

Based on the documentation at https://makecode.microbit.org/blocks-embed we made a little tool to help teacher to create images for their materials. This tool has an upscaling function and the posibility to export SVG and makes the issue more visible: https://go.calliope.cc/tools/makecode/codeimages/ (it's german, but pretty straight forward and everyone's welcome to contribute and translate).

To Reproduce
Steps to reproduce the behavior:

  1. Create some Blocks
  2. Right click
  3. Create screenshot of code
  4. Check the edges of the image

Expected behavior
The image canvas should be slightly bigger to cover the full block.

Screenshots
image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start from the block editor's “Create screenshot of code” action described in the issue and compare the canvas bounds with blocks at each edge. Reproduce the listed steps and consult the linked blocks-embed documentation; done when full edge blocks appear without cropping, including after upscaling and SVG export.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.