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.

Sign up for GitHub

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

Jump to bottom

Handle window resize #42

Open
pobch opened this issue Oct 18, 2022 · 0 comments
Open

Handle window resize #42

pobch opened this issue Oct 18, 2022 · 0 comments
Labels
bug Something isn't working

Comments

@pobch
Copy link
Owner

pobch commented Oct 18, 2022 •
edited
Loading

  • We should not use resize event of window because of the following scenarios:
    • In Android:
      1. A user chooses the text tool
      2. The user click at the very bottom of the page
      3. A Soft keyboard opens
      4. It triggers resize event
      5. resize event handler modifies the canvas size to fit the smaller screen(remaining screen above the soft keyboard)
      6. The user won't see a text input in the screen since the text input is position: absolute and the screen has no scroll now(after it was shrunk). The text input is actually placed off-screen now.
    • In iOS:
      1. A user chooses the text tool
      2. The user click at the very bottom of the page
      3. A Soft keyboard opens
      4. It does NOT trigger resize event
  • One way of hack if we really want to use resize event is trying to separate normal resize event from soft-keyboard triggered resize event. Soft-keyboard should change the height only, and the width is not changed. However, the url bar also behave like this?? We have to add the check for how many px the height was changed??
  • Can we find a way to detect whether the soft keyboard(i.e. virtual keyboard) is opening?? Use this logic to bail out resize event triggered by the soft keyboard.
    • Explore window.screen.availHeight
    • Explore window.visualViewport
  • Use ResizeObserver with <html> or <body> element instead?? Let's try it. But, I think it won't work.
  • After resize the canvas, we need to force re-draw the canvas. To do it, create a new function forceReLoadCurrentSnapshot() inside useHistory(). 
    const newHistory = [...history]
newHistory[currentSnapshotIndex] = [...history[currentSnapshotIndex]]
setHistory(newHistory)
// Steps:
// 1. The currentSnapshot array is re-created
// 2. Dep array of `useEffect()` is triggered
// 3. Draw function(inside `useEffect()`) is triggered
@pobch pobch added the bug Something isn't working label Oct 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@pobch