Now that everything is absolutely position, the editor no longer assumes
a "natural" height and width. This can be addressed later if we want to
allow editors to expand based on their content.
We measure the scrollbar-corner node when there's a stylesheet change,
but Chromium won't apply the new style if it was already visible before
the change. This commit hides and shows it before measuring so we get
accurate values.
Previously, dummy scrollbars were always 15px wide/tall. This caused
them to obscure the ability to click for the entire 15px region, even if
the actual scrollbar was styled to be much thinner. Now we explicitly
measure the size of scrollbars on mount and when the stylesheets change
and set the height/width explicitly.
Horizontal / vertical scrollbars render a 'corner' on the lower right
when they would otherwise overlap. I previously relied on drawing both
dummy scrollbars at their full width/height so the corner got rendered,
but that interfered with the display of the horizontal scrollbar in
certain circumstances because it was too wide to scroll. This commit
provides that behavior with an absolutely positioned div with the same
dimensions as the intersection of scrollbars when both are visible.
This entailed quite a few changes to dial in scrollbars. The scrollbars
are now adjusted in size to account for the width of the opposite
scrollbar. If the width or height are not explicitly constrained and we
are scrollable in the opposite direction that is constrained, we account
for the width of the opposite scrollbar in assigning a natural height
or width based on the content.
Because the scrollbar now spans the entire editor but the scrollable
area does not include the gutter, we need to add the current width of
the gutter to the scroll width of the horizontal scrollbar to allow
it to scroll to the end of the longest lines.
We set overflow to hidden in the opposite scroll direction only if we
can't actually scroll in that direction, causing the white square where
neither scrollbar overlaps to appear at the lower right corner.
This assumes the scrollbar is 15px high, which is incorrect when using
overlay scrollbars or when the scrollbar is styled to have a different
height. We'll need to measure it in a subsequent commit.
This commit breaks the initial render of the editor component into two
stages.
The first stage just renders the shell of the editor so the height,
width, line height, and default character width can be measured. Nothing
that depends on these values is rendered on the first render pass.
Once the editor component is mounted, all these values are measured and
we force another update, which fills in the lines, line numbers,
selections, etc.
We also refrain from assigning an explicit height and width on the
model if these values aren't explicitly styled in the DOM, and just
assume the editor will stretch to accommodate its contents.
When the target of a mousewheel event is removed, it breaks velocity
scrolling.
Previously, we were preserving the entire screen range when scrolling
with the mouse wheel, which caused a lot of DOM nodes to accumulate. Now
we only preserve the individual line and line number associated with the
target of the mousewheel event, moving them just off screen below all
the on-screen lines and line numbers. This keeps the number of DOM nodes
limited while retaining velocity effects.
During the transition to React, it will be easier if the EditorComponent
assumes it's rendered inside the ReactEditorView. This will make it
easier to test compatibility with existing editor APIs.
The space-pen view is now a simple wrapper around the entire React
component to integrate it cleanly into our existing system. React
components can't adopt existing DOM nodes, otherwise I would just have
the react component take over the entire view instead of wrapping.
