feat(edgeless): allow canvas content interleaving with DOM based on LayerManager

[doouding]

Design

In order to allow canvas content to interleave with the DOM content, the canvas content should be able to be rendered on an isolated canvas. The isolated canvas can have its own z-index property, allowing it to be rendered between stacked DOM elements.

We have introduced the LayerManager component that places elements into different layers based on their index property and rendering type. If multiple elements with consecutive indices have the same rendering type, they will be placed within the same layer.

In the following example, the elements have been grouped into three layers:

After building layers, we are able to decide which layer could and should be rendered on an isolated canvas. In this example, the first layer should be rendered on an isolated canvas with the lowest index, and the third layer can be rendered on the main canvas which is always rendered on the very top.

Todo:

• LayerManager
• Add support of multiple canvases rendering for surface block
• Bug & Test

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 28, 2023 2:55am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
blocksuite-docs	⬜️ Ignored (Inspect)	Visit Preview		Nov 28, 2023 2:55am

[doouding]

Finally

[doodlewind]

Awesome work, thanks!