search

huntercfreeman / Blazor.Text.Editor

A repository for the nuget package titled, "Blazor.Text.Editor"
MIT License
103 stars 9 forks source link

[Feature] Support scrolling on mobile/touch devices #39

Open StudioLE opened 1 year ago

StudioLE commented 1 year ago

When viewing the samples on a mobile device it's not possible to scroll the editor down to view more lines of code.

Expected the following bevaiours to work:

huntercfreeman commented 1 year ago

Hey, I saw this issue when it was first opened. I think I'll be able to find time to include a fix for this in v7.1.0.

In other words, I aim to fix this for the update in the next 2-3 weeks.

huntercfreeman commented 1 year ago

I looked into using scrollbars and swiping within the text box for mobile devices.

I want to provide a few source code links before I describe my findings. This was one can take a look at the code if they wish to.

Links

The source code for the scrollbar Blazor components is here: https://github.com/huntercfreeman/Blazor.Text.Editor/tree/main/BlazorTextEditor.RazorLib/Scrollbar

The source code for firing drag events is here: https://github.com/huntercfreeman/BlazorALaCarte.Shared/tree/main/BlazorALaCarte.Shared/Drag

Code

I had begun adding logic to the DragDisplay.razor.cs which would register a handler for the Blazor event \@ontouchmove. This made sense to me as the DragDisplay display currently uses \@onmousemove.

v7.0.0 handles the \@onmousemove event by tracking the current mouse event, and the previous. Events fire to those which are subscribed at that moment. The subscribers then decide what to do with the current and previous mouse events. In the case of the scrollbar Blazor components they look at the current mouse event, and calculate the x position relative to the scrollbar itself. A min, or max is performed to make sure the relative position is within the rendered bounds of the scrollbar.

I can do the same with logic as how v7.0.0 handles the \@onmousemove the Blazor event, with the \@ontouchmove Blazor event. The touch has an array of points that are being touched. The simplist route would be to take the clientX and clientY of the first point in the array and repeat what v7.0.0 does.

Logistical Issue description

As an example, one can visit the monaco text editor demo. If they have not scrolled the page fully down vertically. They can scroll one of the monaco text editor examples down vertically until hitting the bottom of the monaco text editor's vertical scrollbar. If they continue trying to scroll vertically down with the scroll event firing on the monaco text editor, then the page itself will never scroll because the event is being either: (preventDefault or stopPropagation)'d by monaco text editor.

The inability to scroll a webpage while the cursor is over a monaco text editor can be remedied by having gutters to the left or right of the text editor itself. As well a scroll event which beings while the cursor is not over a monaco text editor will continue even if it passes over a monaco text editor.

In Short

A cellular device has less width available to it than a desktop monitor does on average. I worry that a responsive layout will render things to look nice. However, not have a gutter to the left or right of the text editor. And be unable to the scroll due to the preventDefault/stopPropagation event modifications.

I am not closing this issue I just wanted to comment on my findings. I'll continue thinking about this.