Highlights - Perf, render only in viewport, Paragraph on screen callback

[adrian-moisa]

Raw Notes (will improve when I get started here):

• Detect when highlights enter the viewport - Expose callback
• Which slice of text is on screen right now?
• EXPOSE in the public API of controller - > Which paragraph enters or leaves the screen
  • How do we figure out the new paragraphs on screen (editing text) -> We don't want to query twice for text that was not changed
  • how do we know which paragraph is currently edited
  • findWordAtCursor
  • What if we paste multiple paragraphs at once ???
  • Is text on screen ?
  • Beware that your solution does not render only the highlights on screen. It also renders off screen highlights. As I was explaining, this is a contrived approach to handle it from outside. We need to add a method for querying for the paragraphs currently visible on screen. This method will be invoked from the scroll controller when scroll is updated. You can have a diff step to figure out the new paragraphs on screen so you can process only them.
  • That won't be enough, since we also need to get the paragraph when it has been updated.
  • yes indeed, but that can be a separate callback defined in the Controller API. onParagraphUpdate()

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.

[adrian-moisa]

Ansraer, We had a chat a while ago about performance issues with markers. An update for you: I've implemented Markers Attachments. This might be useful for what you need. Basically each time the editor text is update the main build() method is triggered which in turn does a bunch of stuff to render the lines of text. I've taped into the logic that computes the rectangles for all markers. After the main build() completes there's aaddPostFrameCallback that queries all the lines of text in the editor and retrieves a list of markers and their rendered rectangles. This information is cached to be later retrieved on demand.

Additionally I've added 2 callbacks for the editor:

• one for notifying when a build cycle is complete
• one for notifying when a scroll step is complete

      _controller = EditorController(
        document: document,
        markerTypes: [
          //...
        ],
        onBuildComplete: _updateMarkerAttachments,
        onScroll: _updateMarkerAttachments,

You can hook into these callback to run whatever rendering logic you need for attachments. Basically you have:

• Markers data
• Markers rectangles (viewport coordinates)
• Scroll offset
• Viewport dimensions

Using this data you can compute yourself if you want to render something on screen or not, to wherever you want to render it. There's an entire sample page MarkersAttachmentsPage indicating how to piece together this setup (has nice comments to guide you). Beware that in the page I made dedicated effort to avoid using setState() on the parent page. This is essential for preserving scroll performance. Follow the sample step by step and you will figure out precisely how to render anything you want at any position relative to the markers. It's also possible to adjust this code for situation where the editor is configured as non scrollable. You'll have to use the outer ScrollController but the setup is similar.

There's still a list of smaller issues that I'm currently documenting as tickets but overall you should be able to use it successfully. As for markers themselves, VE/Quill already has it covered, no perf issues there.

So given the information above I believe this ticket is outdated and no longer relevant. I'll close it for now.