Implement a method of enclosing multiple elements when there are extra ones selected. #1354
+252
−45
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 newmjx-bbox
element is created with the proper size and offsets, and is prepended to themjx-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 acreateRectangle()
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 themjx-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.