Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix large canvas rendering (at closest zoom levels), with WebEngine #3711

Merged
merged 4 commits into from
Sep 28, 2020

Conversation

ferdnyc
Copy link
Contributor

@ferdnyc ferdnyc commented Sep 8, 2020

While running some tests with the most recent AppImage Daily Build, I loaded a project file and noticed that the ruler completely disappeared at 1-second zoom ­— it wasn't merely cut off, the whole thing was gone.

Turned out, the project had a duration of 644 seconds, which at 1-second zoom made the total timeline width 64450 pixels, well in excess of the 32Kpixel max supported width for HTML <canvas> elements. When I zoomed out to the 3-second level (21000-and-change pixels wide), the ruler reappeared.

It appears that the WebEngine layout engine, in contrast to WebKit, will completely fail to render a canvas element that exceeds the max supported dimensions. With WebKit, the canvas was merely cut off at the maximum width, but WebEngine is clearly more fragile.

This PR adds a canvasMaxWidth() constraint function to the $scope in controller.js, which takes a single numerical argument (desired_width) and executes one statement: return Math.min(32767, desired_width); All code for computing canvas width in both the HTML and the JavaScript now wraps all of those computations in canvasMaxWidth() to ensure that none of the canvas elements exceed their maximum allowable dimensions.

The audio-waveform rendering appears a bit "off" in this code, placed oddly and sticking out onto the border of the Clip area slightly. But that's identical to how it renders with the current develop branch code before this PR, so #NOTMYFAULT.

Might fix some open Issues, not sure. I haven't checked in a few days.

- Make the constraint on canvas width generic, as canvasMaxWidth()
  in the functions.js file
- Apply it to the progress and waveform canvases, also
- Also check max width in `drawAudio()` and redrawing code for
  the ruler and progress canvases.
@ferdnyc ferdnyc added 📅 Daily Build This is an issue involving a daily build. timeline An issue or PR involving the HTML/JS/CSS timeline implementation labels Sep 8, 2020
@ferdnyc
Copy link
Contributor Author

ferdnyc commented Sep 28, 2020

I'mma merge this one, since having no ruler at all on larger projects is kind of a pain, and this change at least brings things back to the way they were pre-WebEngine.

@ferdnyc ferdnyc merged commit 9629c24 into OpenShot:develop Sep 28, 2020
@ferdnyc ferdnyc deleted the canvas-fix branch September 28, 2020 17:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📅 Daily Build This is an issue involving a daily build. timeline An issue or PR involving the HTML/JS/CSS timeline implementation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant