Feature: optimize pan zoom

hunkim98 commented 12 months ago

🚀 [ Resolves #88 ] 🚀 [ Resolves #90 ]

Preview

Without optimization (1 million pixels)

https://github.com/hunkim98/dotting/assets/57612141/8ec6c6cf-ff88-4001-9cfa-60b70d307622

With optimization (1 million pixels)

https://github.com/hunkim98/dotting/assets/57612141/9ecb0122-5e91-431a-a5f9-c425a87d7539

Changes

Optimize panning and zooming using `Offscreen Canvas`

[🎨Component] Use Offscreen Canvas for creating image bitmap when user has modified the grid canvas
- Previously, changing offset of zoom scale called our render function. This inevitably made our component run through a nested loop everytime there is a slight change in offset or zoom scale
- I found it unnecessary to call a nested for loop everytime we do a render.
- I came up with an idea to create an image bitmap once a user's interaction finishes. Then I used that image bitmap when the user pans or zooms.
- This highly upgraded the performance of panning or zooming for 1 million pixels!

Notes

There seems to be some lag at the moment user finishes interacting with the grid canvas. Maybe we should take a look into that issue

Next Up?

With this optimization, I believe we could try building Photoshop from scratch?🙀 @Lee-Si-Yoon @lerrybe

github-actions[bot] commented 12 months ago

PR Preview Action v1.4.4 :---: Preview removed because the pull request was closed. 2023-11-11 14:08 UTC

hunkim98 commented 11 months ago

@Lee-Si-Yoon I have attempted to implement Worker logic to our Dotting. However, there were many synchronization problems due to the library having multiple canvases. Worker logic is asynchronous and thus, it seemed that many of our canvases did not sync together. Thus I decided to discard the Worker logic and stick to our original version of simply rendering all by javascript logic.

In the future, I believe implement worker logic will be impossible for Dotting due to its design of having multiple canvases 😥

hunkim98 commented 11 months ago

@Lee-Si-Yoon I have attempted to implement Worker logic to our Dotting. However, there were many synchronization problems due to the library having multiple canvases. Worker logic is asynchronous and thus, it seemed that many of our canvases did not sync together. Thus I decided to discard the Worker logic and stick to our original version of simply rendering all by javascript logic.

In the future, I believe implement worker logic will be impossible for Dotting due to its design of having multiple canvases 😥

However I do believe we can add a worker logic to the DataLayer render where it renders through all the rows and data. However, I believe that is another issue unrelated with optimizing pan zoom, so I will not add any code using worker logic in this PR

Lee-Si-Yoon commented 11 months ago

I agree that implementing worker api is out of scope for this PR. Nice job let's merge this

discussed offline about capturedImageBitmapScale getting not initialized
just one last complain with responsibility, do we have to create fake canvas every time when onInteractionEnded is called

hunkim98 commented 11 months ago

I agree that implementing worker api is out of scope for this PR. Nice job let's merge this

discussed offline about capturedImageBitmapScale getting not initialized

just one last complain with responsibility, do we have to create fake canvas every time when onInteractionEnded is called

I fixed the issue of capturedImageBtimapScale not being set correctly. Regarding creating fake canvas every time onInteractionEnded is called, I believe the logic would be more complex if we tried to separate parts for updating fake canvas and rendering pixel squares in them. Instead, I selectively rendered data layer and updated captured image only when data has been changed!

  onInteractionEnded(evt: TouchyEvent) {
    evt.preventDefault();
    const isDataModified = this.relayInteractionDataToDataLayer();
    if (this.mouseMode !== MouseMode.NULL && isDataModified) {
      this.dataLayer.render();
      this.dataLayer.updateCapturedImageBitmap();
    }