resizable stage #9753
resizable stage #9753
Conversation
no code changes
|
All contributors have signed the CLA ✍️ ✅ |
src/components/box/resizeableBox.jsx
Outdated
There was a problem hiding this comment.
This is a new "Box" wrapper which gives a drag-resizable handle on the left side of the container
| @@ -207,9 +207,6 @@ | |||
| /* pad entire wrapper to the left and right; allow children to fill width */ | |||
| padding-left: $space; | |||
| padding-right: $space; | |||
|
|
|||
| /* this will only ever be as wide as the stage */ | |||
| flex-basis: 0; | |||
There was a problem hiding this comment.
needed to get rid of this to have dynamic sizing
| }} | ||
| /> | ||
| ); | ||
|
|
There was a problem hiding this comment.
react-draggable really did not like using a scaled container as the bounding reference, but we needed the scaling both visually as well as for proper drag deltas for the monitors. This dummy div of a constant width is a hacky solution that makes react-draggable happy. A better solution would likely be way more involved, perhaps replacing react-draggable entirely.
| @@ -52,6 +52,7 @@ const MonitorComponent = props => ( | |||
| defaultClassNameDragging={styles.dragging} | |||
| disabled={!props.draggable} | |||
| onStop={props.onDragEnd} | |||
| scale={props.scale} | |||
There was a problem hiding this comment.
drilling this scale prop to the draggable element corrects the drag deltas for different stage sizes
There was a problem hiding this comment.
My changes to this file are purely superficial. now that the stage panel can get extra wide, it just looked silly to have the input fields spread across the entire width, so I made containers that act as a max-width for the controls
src/components/stage/stage.jsx
Outdated
There was a problem hiding this comment.
most of this work (and it's corresponding css) just enables the stage canvas to be the maximum size it can without overflowing its container.
Here we're also using the new useCanvasSize hook to get the dimensions we need
src/containers/stage.jsx
Outdated
There was a problem hiding this comment.
we need to update the canvas resolution when we resize the stage
src/lib/screen-utils.js
Outdated
There was a problem hiding this comment.
replacing getStageDimensions with a more flexible react hook
|
I have read the CLA Document and I hereby sign the CLA |
Recording.2024-11-26.045749.mp4
Proposed Changes
This PR implements a drag-resizable stage panel which is also used as the "large" stage toggle. This is a purely additive quality-of-life feature that shouldn't change any behaviors users expect.
Reason for Changes
With higher DPI displays becoming more common on PCs and Tablets, the stage size options are a less-than-ideal "small" or "tiny." Often this means users rely on full-screen mode to check their work in more detail, but at the cost of losing the context of your code editor making iteration slow and annoying.
The solution is to have a more responsive user-customizable approach to displaying the stage. Users can set the stage size to whatever makes sense for their working environment. We can preserve the toggle functionality for users by allowing the "large" setting to be the user-defined draggable size.
This refactors some old code to be more flexible using react hooks to observe the size of the container elements to determine the necessary scale whereas the prior approach had a lot of hard-coded assumptions about the two size modes.
Resolves
While this PR isn't meant to be a bug-fix, it does address some undocumented issues:
Browser Coverage
Check the OS/browser combinations tested (At least 2)
Mac
Windows
Chromebook
iPad
Android Tablet