Fix an issue where exported images would be smaller #1349
Conversation
Calculates the Width of the image to be exported when the widthAdjustment is False and the set Width is greater than the displayed Width.
|
@hatsu38 is attempting to deploy a commit to the Carbon Team on Vercel. A member of the Team first needs to authorize it. |
| const settingWidth = parseInt(this.state.width) | ||
| const isOverWidth = offsetWidth < settingWidth | ||
| if (!isOverWidth) return offsetWidth | ||
|
|
||
| return settingWidth + parseInt(this.state.paddingHorizontal) |
There was a problem hiding this comment.
When the set width is larger than the displayed width, the width of the exported image is calculated using the set width.
| @@ -93,6 +93,16 @@ class Editor extends React.Component { | |||
| updateCode = code => this.updateState({ code }) | |||
| updateWidth = width => this.setState({ widthAdjustment: false, width }) | |||
|
|
|||
| calculateExportImageBaseWidth = offsetWidth => { | |||
There was a problem hiding this comment.
@hatsu38 sorry for the delay. Unfortunately, I don't want to do any complex calculation here.
I would prefer for the editor window to go off screen on smaller displays and have this function just capture what is there than try and make the editor fit on smaller screens and do this calculation after the fact.
Can we just make the editor go off screen on mobile, but allow the user to easily scroll horizontally?
There was a problem hiding this comment.
@mfix22 Thank you for your comment.
I will fix it at a later date and push it.
There was a problem hiding this comment.
@hatsu38 no rush on this at all, but just wanted to check in here to see if you have any updates 🙂
There was a problem hiding this comment.
Sorry, I have not been able to solve this problem recently due to lack of time
There was a problem hiding this comment.
No worries at all @hatsu38! I'm going to close this in the meantime, but feel free to re-open it whenever, or open a new PR anytime.
Closes #1287
Issue Summary
When viewing on mobile, increasing width makes it responsive.
However, the exported image was also responsive and vertically long.
Detail: #1287 (comment)
Solution
2022-03-13.15.58.52-1.mov