bonsai_revery icon indicating copy to clipboard operation
bonsai_revery copied to clipboard

New components

Open geoffder opened this issue 3 years ago • 3 comments

I've added Resizable, Draggable, Slider, and ScrollView components, the former of which compose to create the latter. Examples of Draggable, Slider, and ScrollView components have also been added to the todoMVC.

I have left a note about an issue that I am having and have so far been unable to resolve with attempting to use the ScrollView component with Row flex_direction styling, and how bringing it more in line with ScrollView.re should be done. However after fiddling with it a lot, I'm afraid my lack of flexbox knowledge means that I'm not even sure if it should be working, or there are greater issues with my implementation (probably most likely) or Revery itself. If you are able to play with it and see if you can make any sense of it, it'd be awesome.

geoffder avatar Dec 07 '20 06:12 geoffder

Found the issue with lack of ability to click after horizontal scrolling by the way. It was of course a stupid mistake on my end. Wheel scrolling was causing capture on some unknown element. Removing the capture from the scroll handling block (included due to carelessly pasteing) in clickable_box' has remedied the issue.

geoffder avatar Dec 07 '20 23:12 geoffder

Do you have an idea of how we should emulate Revery.Hooks.mouseCapture, as used here:

  let%hook (captureMouse, captureState) =
    Hooks.mouseCapture(
      ~onMouseMove=
        (origin, evt: NodeEvents.mouseMoveEventParams) => {
          sliderUpdate(
            availableWidth,
            origin,
            origin +. availableWidth,
            evt.mouseX,
            evt.mouseY,
          );
          Some(origin);
        },
      ~onMouseUp=(_, _) => None,
      (),
    );

  let onMouseDown = (evt: NodeEvents.mouseButtonEventParams) => {
    let (x0, y0, _, _) = BoundingBox2d.getBounds(sliderBoundingBox);
    let origin = vertical ? y0 : x0;
    sliderUpdate(
      availableWidth,
      origin,
      origin +. availableWidth,
      evt.mouseX,
      evt.mouseY,
    );
    captureMouse(origin);
  };

This capture hook is allowing the slider to continue receiving mouse move events as long as the button is still down. Right now, the Bonsai component Slider in this PR isn't super nice to use since once the cursor leaves the bounding box of the thumb, the events are no longer going to it.

Obviously capturing has to be registered somewhere and events need to be sent through to it, but I'm not sure what the most appropriate way to go about it is.

geoffder avatar Dec 09 '20 06:12 geoffder

Figured out a solution based on Revery_UI.Hooks.mouseCapture (using Revery_UI.Mouse). Now the sliders aren't so painful to use!

geoffder avatar Dec 10 '20 06:12 geoffder