Skip to content

Conversation

dpvc
Copy link
Member

@dpvc dpvc commented Sep 16, 2025

This PR implements a method for enclosing multiple elements when extra ones are included rather than having multiple outlines and backgrounds.

This works by collecting the split nodes into groups by which line they are in (when there are line breaks) and enclosing those collections separately. This is done by inserting a new, temporary node that represents the bounding box of all the elements in each collection. Most of the work is done in the highlighter through the new method encloseNodes(), which does the separation into collections by line, computes the bounding box in each line, and creates and inserts the new node for that bounding box.

How that bounding box node is created and inserted differs in the CHTML and SVG highlighters, and that is handled in the new createEnclosure() method. For HTML elements, and new mjx-bbox element is created with the proper size and offsets, and is prepended to the mjx-container. For SVG, a rect is created and inserted before the first selected element in each line. The creation of the SVG rectangles is abstracted into a createRectangle() method that is used for both the enclosure rectangle as well as the individual background rectangles for the highlighter. If an enclosing rectangle is created, it is used for highlighting as well, so no need to create a highlight rectangle as well.

Selected nodes that are enclosed get marked with a data-mjx-enclosed attribute and their backgrounds are not colored and they don't get the mjx-selected attribute (since the enclosure will get the background and outline).

The unhighlight methods are modified to remove any added enclosures when they become unselected.

The CSS for the CHTML outline is moved from the explorer.ts to the chtml.ts file, to correspond to the CSS in the svg.ts file, though I suppose the CSS from svg.ts could be moved to explorer.ts instead, if that seems better. I also added 'data-' to the sre-highlight attributes, since they are not valid on SVG elements.

@dpvc
Copy link
Member Author

dpvc commented Sep 16, 2025

Oh, I also added a filter to the subtree() method to remove null entries, since there currently are ids in the structure that have no corresponding DOM nodes in the tree. If that gets fixed, the filter should be removed.

@dpvc dpvc requested a review from zorkow September 16, 2025 23:41
@dpvc dpvc added this to the v4.0.1 milestone Sep 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant