adrian-moisa
commented
2 years ago Markers - Render attachments for the selection (for quick menu)
- Upgraded the highlights hovering service to use pixel coordinates instead of text position to detect the hovering.
- Added a markers hovering service.
- Added demo page to demonstrate how to attach menus or random widgets when tapping on highlights and markers or when changing the selection.
- Exported the rectangles data for the selection. Now we have two ways of attaching widgets to the text selection. Read Selection documentation for more details: https://github.com/visual-space/visual-editor/blob/develop/lib/selection/selection.md
I've added a dedicated demo page to demonstrate the 3 ways for triggering selection menus: highlights, makers and selection. Looking at the demo code one can believe that the current API for managing selection menu is rather complex. However, our goal is not to provide a minified toolbars as the selection menu. Our goal is to provide an API that is versatile enough to be used for any menu, in any position triggered by any conditions you can think of. This gives maximum flexibility to implement any kind of UX interactions you might need for your particular app. Even the positioning logic was left open for the client developers to best decide what fits them best. If all you need is to setup a new button in the custom menu, then try using the custom controls option.
Attaching Menus To Selections
We have separated the selection callback from the selection caching code because we have to wait for the build() to complete to extract the rectangles of a text selection. We want to use these rectangles to give total freedom to the client devs to decide how to place their attachments.
This means we now have 2 ways of customizing the selection menu:
1) When the selection callbacks have emitted we can use the rectangles data to place any attachment anywhere Recommended when you want to place atypical looking markers related to the lines of selected text 2) Standard flutter procedure using a custom TextSelectionControls Recommended when you want to display standard selection menu with custom buttons.
Therefore we decided to split the selection update cycle in two stages.
Stage 1 - Updating Selection Extent
- First, we collect the new selection extends (as it was done until now).
- We wait for the build() to complete to gain access to the latest selection rectangles from the editable line renderers.
- We cache the rectangles by lines information in the state store
Stage 2 - Callback With Rectangles Data
- Now that the build is complete and we have latest data, we call the selection callbacks that were defined in the original API, now including the rectangles data.
Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.
We need to render a custom quick menu. This requires us to update VE to support custom attachments on selection. Now the question how do we do this without colliding with the copy paste actions on mobile?