reqable / re-editor

Re-Editor is a powerful lightweight text and code editor widget.
https://pub.dev/packages/re_editor
MIT License
509 stars 51 forks source link

When trying to click-drag the scroll bar, it selects the underlying text instead #38

Open TechnicJelle opened 2 months ago

TechnicJelle commented 2 months ago

Describe the bug I have a code editor where I have set the horizontal and vertical scrollbars to be permanently visible. When I try to scroll, the text behind the scroll bar is selected, instead of the scroll bar. Only sometimes do I manage to grab the bar itself.

The issue is most noticeable with the vertical scroll bar, where it actually selects through many lines. But you can also see it happening with the horizontal scroll bar. Except there, it doesn't select, but it just moves the text editing cursor (caret) where you click.

To Reproduce Steps to reproduce the behaviour:

  1. Copy this code into a fresh Flutter project:
    
    import 'package:flutter/material.dart';
    import 'package:re_editor/re_editor.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget { const MyApp({super.key});

@override State createState() => _MyAppState(); }

class _MyAppState extends State { final codeController = CodeLineEditingController();

@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: ScrollbarTheme( data: Theme.of(context).scrollbarTheme.copyWith( radius: const Radius.circular(2), thumbVisibility: const WidgetStatePropertyAll(true), trackVisibility: const WidgetStatePropertyAll(true), ), child: CodeEditor( indicatorBuilder: (context, editingController, chunkController, notifier) { return DefaultCodeLineNumber( notifier: notifier, controller: editingController, ); }, style: const CodeEditorStyle(fontFamily: "monospace"), controller: codeController, wordWrap: false, scrollbarBuilder: (context, child, details) { return Scrollbar( controller: details.controller, child: child, ); }, ), ), ), ); } }


2. Run it
3. Copy or type a bunch of text into it
4. Shrink the window until it becomes horizontally scrollable
5. Click and drag the vertical scroll bar to try to scroll up or down

**Expected behaviour**
I would expect it to grab a hold of the scroll bar itself, instead of the text behind it.

**Screenshots**
It is difficult to show this happening in a screenshot, so here are two videos instead:

Here is the issue happening in [my actual Flutter app](https://github.com/TechnicJelle/BlueMapGUI/blob/cd96faf1eab009ea905377b7065a4528b448f3c9/lib/config_editor.dart):

https://github.com/user-attachments/assets/4f2a4af9-5312-4651-afda-6776733a9cb5

And here is the issue happening in the minimal reproducible example I sent above:

https://github.com/user-attachments/assets/2465e0d6-b098-423e-b0dc-a042add89d0c

**Device:**
- OS: Manjaro Linux x86_64
- Version Kernel: 6.6.47-1-MANJARO

**Additional context**
It could be that this is just a misconfiguration on my part, but if it is, I would love to know how I can fix it!

By the way, thank you for making this library. It's absolutely incredible. I really love it!
MegatronKing commented 2 months ago

Fixed on v0.4.0.

TechnicJelle commented 2 months ago

Wow, that was fast! I really appreciate it!!! :purple_heart:

TechnicJelle commented 2 months ago

image

https://github.com/user-attachments/assets/205dcac6-d6e6-4c3a-8c1b-a675750fd5b8

(I made the scrollbars a bit bigger, to make them easier to click, now)

Though, regretfully, I must say the issue still happens, even on 0.4.0...

MegatronKing commented 1 month ago

Maybe you need to tell the editor the width of the scroll bar. I'll consider how to support this.

MegatronKing commented 2 weeks ago

Now you can use verticalScrollbarWidth and horizontalScrollbarHeight to tell editor the size of your scrollbar.

TechnicJelle commented 2 weeks ago

I am very sorry to say that, even when specifying the verticalScrollbarWidth and horizontalScrollbarHeight, it still selects the text through the scrollbar sometimes... :cry:

https://github.com/user-attachments/assets/42f3cc0b-cd53-4b51-8546-ba1b5d2d430f


It also seems that the scrollbar loses the mouse drag when the horizontal scrollbar appears or disappears. When the program first starts, there is no text cursor in the editor yet, and that is when this happens. Then, when you click in the editor, the text cursor appears, and then the earlier issue happens.

https://github.com/user-attachments/assets/276f32c4-50ff-4ce1-94fb-bc7ba28f1b9a

I apologise for reporting this bug again and again :sweat_smile:

MegatronKing commented 2 weeks ago

That is strange, I can not reproduce this issue on my demo project.

import 'package:flutter/material.dart';
import 'package:re_editor/re_editor.dart';

class BasicField extends StatelessWidget {

  const BasicField({super.key});

  @override
  Widget build(BuildContext context) {
    return CodeEditor(
      wordWrap: false,
      controller: CodeLineEditingController.fromText(('${'Hello Reqable💐👏 ' * 10}\n') * 100),
      verticalScrollbarWidth: 20,
      scrollbarBuilder: (context, child, details) {
        return Scrollbar(
          controller: details.controller,
          thickness: 20,
          child: child,
        );
      },
    );
  }
}

https://github.com/user-attachments/assets/245fc4bd-4819-435d-a2ed-39b777398dff

alsemitoo commented 2 weeks ago

I think the problem is because you (@MegatronKing) always have vertical and horizontal scroll. In @TechnicJelle 's example, it fails when a line that "needs" horizontal scroll appears or disapears in the screen.

TechnicJelle commented 2 weeks ago

That could be, yeah! I definitely noticed some strange behaviours regarding that.

TechnicJelle commented 2 weeks ago

Also, the video you sent (2.mov) seems to be a 0 byte file... image

MegatronKing commented 2 weeks ago

@TechnicJelle Please try this ref b37a7151780803c1d0145a182dc9d59d95b4f3a3

alsemitoo commented 1 week ago

I tried it with the same configuration as you and still did not get it to work. It appears it works fine when no horizontal scrolling is needed, but as soon as horizontal scrolling appears, vertical scrolling stops working properly.

  const BasicField({super.key});

  @override
  Widget build(BuildContext context) {
    return CodeEditor(
      wordWrap: false,
      controller: CodeLineEditingController.fromText(
          ('${'Hello Reqable💐👏 ' * 10}\n') * 100),
      horizontalScrollbarHeight: 20,
      verticalScrollbarWidth: 20,
      scrollController: CodeScrollController(
        verticalScroller: ScrollController(),
        horizontalScroller: ScrollController(),
      ),
      scrollbarBuilder: (context, child, details) {
        return Scrollbar(
          controller: details.controller,
          thickness: 20,
          child: child,
        );
      },
    );
  }
}

https://github.com/user-attachments/assets/6e1b8ada-0a04-47e3-b462-3c3247248523

MegatronKing commented 1 week ago

@TechnicJelle Please try this ref b37a715

I think we have fixed on this commit.

TechnicJelle commented 1 week ago

I will try it soon! Hopefully this weekend...

TechnicJelle commented 1 week ago

Well, I suppose the issue with it selecting the text behind the scrollbar has been fixed... But there is now a new problem: when I click-drag the scrollbar, it loses grip.

https://github.com/user-attachments/assets/c1bda0e1-1941-45a6-9c0f-b937eb683fc6

I finally found a little program to highlight my mouse presses, so you can see exactly when I am clicking and dragging. (Yellow is normal, red is mouse button down)

Should this issue be closed and a new one be opened for this new problem? Or can we continue using this one?

TechnicJelle commented 1 week ago

I should also mention that I tried the latest commit from main as well (fb361506f00839653230d092fc0d6a442d8e82d4) but that has the same (or similar) issues...