Ability to resize lists on mobile

BigNate469

Catzcute4 wrote:
seriously all this one needs is to add an ontouch sensor, and it should be fixed, and the list system already has onmouse

Preferably it's changed to a pointerdown, because pointerdown recognizes basically everything, while click and touch event handlers only reconize computer mice and touchscreen inputs- while things like pointerdown also recognizes styluses and other forms of input.

Besides, it takes up less space in code.

Also, I think I found the exact two lines of code that are causing the problem:
https://github.com/scratchfoundation/scratch-gui/blob/develop/src/containers/list-monitor.jsx#L140
(lines 140-152)

const onMouseUp = ev => {
  //Note inserted by the post author (@BigNate469): The following function is declared further up in this file, it basically just looks for where the mouse is and sets the width and height accordingly.
  onMouseMove(ev); // Make sure width/height are up-to-date
  window.removeEventListener('mousemove', onMouseMove);
  window.removeEventListener('mouseup', onMouseUp);
  this.props.vm.runtime.requestUpdateMonitor(Map({
    id: this.props.id,
    height: this.state.height,
    width: this.state.width
  }));
};
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);

Unfortunately, I don't presently have the time to fork and edit scratch-gui to see if this actually is.

Edit: after building it, changing the above to pointer events doesn't seem to work, at least on my Chromebook (which has a touchscreen). See below post
||
v

Last edited by BigNate469 (Jan. 31, 2025 17:38:59)

BigNate469

Okay, I did manage to get it working. Code that needs to be changed:
src/components/monitor/list-monitor.jsx line 142, src/components/monitor/list-monitor.jsx line 143, src/components/monitor/list-monitor.jsx line 151,src/components/monitor/list-monitor.jsx line 152, and src/components/monitor/list-monitor.jsx line 47.

Basically, changing everywhere it says “mousedown”, “mouseup” and “onMouseDown” to “pointerdown”, “pointerup” and “onPointerDown” respectively seems to make resizing lists work on both touchscreens and computer mice/trackpads, although I've only been able to test it on my Chromebook's built-in trackpad (I don't have a mouse on me right now), and my Chromebook's touchscreen.

Diff:

src/components/monitor/list-monitor.jsx (line 47):

- onMouseDown={draggable ? onResizeMouseDown : null}
+ onPointerDown={draggable ? onResizeMouseDown : null}

src/containers/list-monitor.jsx (lines 140-152):

  const onMouseUp = ev => {
    onMouseMove(ev); // Make sure width/height are up-to-date
-  window.removeEventListener('mousemove', onMouseMove);
-  window.removeEventListener('mouseup', onMouseUp);
+  window.removeEventListener('pointermove', onMouseMove);
+  window.removeEventListener('pointerup', onMouseUp);
    this.props.vm.runtime.requestUpdateMonitor(Map({
      id: this.props.id,
      height: this.state.height,
      width: this.state.width
    }));
  };
- window.addEventListener('mousemove', onMouseMove);
- window.addEventListener('mouseup', onMouseUp);
+ window.addEventListener('pointermove', onMouseMove);
+ window.addEventListener('pointerup', onMouseUp);

Note that this doesn't change the fact that the equals sign is hard to tap on mobile anyways, but it at least fixes the fundamental problems with the event listeners involved.

Last edited by BigNate469 (Jan. 31, 2025 19:03:59)

Catzcute4

BigNate469 wrote:
-snip-

It’s possible to use the stackexchange touch to mouse too, as I do, though fixing the glitch is way easier for everyone (maybe it could be dine during maintenance ?)

Last edited by Catzcute4 (Jan. 31, 2025 22:48:09)

BigNate469

Catzcute4 wrote:
BigNate469 wrote:
-snip-
It’s possible to use the stackexchange touch to mouse too, as I do, though fixing the glitch is way easier for everyone (maybe it could be dine during maintenance ?)

There are issues with your solution though:
1. Once enabled, it breaks if the user then uses a mouse without reloading the page
2. According to your post, it breaks Scratch in the process (which is obviously not a good thing)
3. Scratch's source code is not directly run in a browser- in fact, it's incapable of doing so. It has to be built first, and it's possible that whatever React component they stick that code into might not be able to affect the list monitor anyways
4. It doesn't fix the underlying problem, it just treats the symptoms.
5. It's substantially longer than mine

Catzcute4

BigNate469 wrote:
Catzcute4 wrote:
BigNate469 wrote:
-snip-
It’s possible to use the stackexchange touch to mouse too, as I do, though fixing the glitch is way easier for everyone (maybe it could be dine during maintenance ?)
There are issues with your solution though:
1. Once enabled, it breaks if the user then uses a mouse without reloading the page
2. According to your post, it breaks Scratch in the process (which is obviously not a good thing)
3. Scratch's source code is not directly run in a browser- in fact, it's incapable of doing so. It has to be built first, and it's possible that whatever React component they stick that code into might not be able to affect the list monitor anyways
4. It doesn't fix the underlying problem, it just treats the symptoms.
5. It's substantially longer than mine

indeed. that’s why i support your idea of just fixing it. also don’t forget about the slider variables whose limits cannot change

Last edited by Catzcute4 (Feb. 2, 2025 21:51:51)

50_scratch_tabs

Catzcute4 wrote:
(#245)
also don’t forget about the slider variables whose limits cannot change

I don't believe this is true.

BigNate469

50_scratch_tabs wrote:
Catzcute4 wrote:
(#245)
also don’t forget about the slider variables whose limits cannot change
I don't believe this is true.

Try changing a slider variable to anything on mobile. You will find that no matter how long you press and hold on the variable monitor, the dialog to change it to another type of variable or change its range never pops up.

50_scratch_tabs

BigNate469 wrote:
(#247)
50_scratch_tabs wrote:
Catzcute4 wrote:
(#245)
also don’t forget about the slider variables whose limits cannot change
I don't believe this is true.
Try changing a slider variable to anything on mobile. You will find that no matter how long you press and hold on the variable monitor, the dialog to change it to another type of variable or change its range never pops up.

Oh, sorry. I could've sworn I did that before. Also, @BigNate469, if you have a GitHub account you could make a pull request.

Catzcute4

50_scratch_tabs wrote:
BigNate469 wrote:
(#247)
50_scratch_tabs wrote:
Catzcute4 wrote:
(#245)
also don’t forget about the slider variables whose limits cannot change
I don't believe this is true.
Try changing a slider variable to anything on mobile. You will find that no matter how long you press and hold on the variable monitor, the dialog to change it to another type of variable or change its range never pops up.
Oh, sorry. I could've sworn I did that before. Also, @BigNate469, if you have a GitHub account you could make a pull request.

he probably has

50_scratch_tabs

50_scratch_tabs wrote:
(#248)
BigNate469 wrote:
(#247)
50_scratch_tabs wrote:
Catzcute4 wrote:
(#245)
also don’t forget about the slider variables whose limits cannot change
I don't believe this is true.
Try changing a slider variable to anything on mobile. You will find that no matter how long you press and hold on the variable monitor, the dialog to change it to another type of variable or change its range never pops up.
Oh, sorry. I could've sworn I did that before. Also, @BigNate469, if you have a GitHub account you could make a pull request.

It doesn't look like he has. May I?

And as for the slider thing, this seems to be intentional: https://github.com/scratchfoundation/scratch-gui/blob/4416bb5f6d2b19b4d923cb6bc64a598725ce6e60/src/components/monitor/monitor.jsx#L46

Catzcute4

50_scratch_tabs wrote:
50_scratch_tabs wrote:
(#248)
BigNate469 wrote:
(#247)
50_scratch_tabs wrote:
Catzcute4 wrote:
(#245)
also don’t forget about the slider variables whose limits cannot change
I don't believe this is true.
Try changing a slider variable to anything on mobile. You will find that no matter how long you press and hold on the variable monitor, the dialog to change it to another type of variable or change its range never pops up.
Oh, sorry. I could've sworn I did that before. Also, @BigNate469, if you have a GitHub account you could make a pull request.
It doesn't look like he has. May I?

And as for the slider thing, this seems to be intentional: https://github.com/scratchfoundation/scratch-gui/blob/4416bb5f6d2b19b4d923cb6bc64a598725ce6e60/src/components/monitor/monitor.jsx#L46

I don’ think mobile accessibility problems would be intentional.

BigNate469

50_scratch_tabs wrote:
50_scratch_tabs wrote:
snip
It doesn't look like he has. May I?

I do (same username- github.com/BigNate469), I just haven't gotten to making a PR. Go ahead and do so if you wish.

50_scratch_tabs

Catzcute4 wrote:
(#251)
I don’ think mobile accessibility problems would be intentional.

It's not mobile accessibility, it's that they don't want long pressing to happen when you're dragging sliders.

BigNate469 wrote:
(#252)
I do (same username- github.com/BigNate469), I just haven't gotten to making a PR. Go ahead and do so if you wish.

I made an issue, which you're supposed to do (among other things) before making a PR.

Catzcute4

50_scratch_tabs wrote:
Catzcute4 wrote:
(#251)
I don’ think mobile accessibility problems would be intentional.
It's not mobile accessibility, it's that they don't want long pressing to happen when you're dragging sliders.

well like just have it on the top portion

50_scratch_tabs

Catzcute4 wrote:
(#254)
50_scratch_tabs wrote:
Catzcute4 wrote:
(#251)
I don’ think mobile accessibility problems would be intentional.
It's not mobile accessibility, it's that they don't want long pressing to happen when you're dragging sliders.
well like just have it on the top portion

I haven't worked with scratch-gui quite enough to know how to do that.

Catzcute4

50_scratch_tabs wrote:
Catzcute4 wrote:
(#254)
50_scratch_tabs wrote:
Catzcute4 wrote:
(#251)
I don’ think mobile accessibility problems would be intentional.
It's not mobile accessibility, it's that they don't want long pressing to happen when you're dragging sliders.
well like just have it on the top portion
I haven't worked with scratch-gui quite enough to know how to do that.

if mouse y > [the html slider’s y coordinate] + [offset if the css does things like putting 0 0 at top left] then do it (mouse y btw is something accessible via event listeners

Last edited by Catzcute4 (Feb. 4, 2025 13:42:40)

TeacherZooetrope

Scratch supports Android. Sometimes, mobile have small screens so they have less space for their screen. Have any laptop of that?

OGBoneK

Catzcute4 wrote:
(#256)
if mouse y > + hen do it (mouse y btw is something accessible via event listeners

That sounds really hacky and error prone.

TeacherZooetrope wrote:
(#257)
Scratch supports Android. Sometimes, mobile have small screens so they have less space for their screen. Have any laptop of that?

What?

(Geez, soon my alts are gonna have more posts than my main!)

Last edited by OGBoneK (Feb. 4, 2025 12:09:36)

BigNate469

OGBoneK wrote:
Catzcute4 wrote:
(#256)
if mouse y > + hen do it (mouse y btw is something accessible via event listeners
That sounds really hacky and error prone.

It isn't really “hacky”, although it is error prone- especially if the slider variable is at the bottom of the screen.

Catzcute4 wrote:
if mouse y > [the html slider’s y coordinate] + [offset if the css does things like putting 0 0 at top left] then do it (mouse y btw is something accessible via event listeners

(edited quote to make it appear correctly)

Catzcute4

BigNate469 wrote:
Catzcute4 wrote:
if mouse y > [the html slider’s y coordinate] + [offset if the css does things like putting 0 0 at top left] then do it (mouse y btw is something accessible via event listeners

OMG thanks for teaching me that

Last edited by Catzcute4 (Feb. 4, 2025 13:44:03)

Discuss Scratch