Drawing live line on Canvas

[matthewcrews]

I have been developing a simple tool for dragging and connecting blocks. I've added the ability to click on an output node (yellow button on the right) and I'm drawing a red line to wherever the cursor is pointing to. The problem is that it only updates to the cursor's position when it's inside another button on the screen.

Here's a snapshot of the line drawing to where the cursor currently is:

If I move the cursor outside of the buttons I get this though:

Notice how the cursor has moved to the right but the green line is no longer tracking the cursor. I tried adding an event handler for onPointerMoved to the Canvas but that doesn't seem to be working:

Canvas.create [
    Canvas.onPointerMoved (fun e ->
        let newPointerLocation = e.GetPosition null
        Msg.Move newPointerLocation |> dispatch)
    Canvas.children [

You can see the full code at the link below. To recreate the issue, clone the repo, run the program, click on the right yellow button, and move the cursor around.

Code for Line Drawing:
https://github.com/matthewcrews/AvaloniaDragAndDrop/blob/5c1899517061d35da9ad859fc922e3250871f2d1/Program.fs#L199

[JaggerJo]

You need to capture the pointer if you want to get movements even when it leaves the element.

[matthewcrews]

I'm guessing I need to perform this capture in the Button.onPointerPressed method. Something like this:

Button.onPointerPressed (fun e ->
    let pointer = new Input.Pointer(0, Input.PointerType.Mouse, true)
    pointer.Capture (pointer :> Input.IInputElement)
    let newPointerLocation = e.GetPosition null
    Msg.Selection (Selection.Block (blockIdx, newPointerLocation)) |> dispatch)

But I'm not confident. The compiler also says the cast from Pointer to IInputElement is invalid.

[JaggerJo]

Yes, exactly. And when you're done / user aborts selection you need to Release the pointer again.

Does it work?

[matthewcrews]

No. The code I wrote above doesn't work because the compiler says that Pointer cannot be cast to IInputElement. I also cannot find any example of anyone capturing a pointer online. The only thing I find is the API documentation which just tells me the method type signature but no working examples which is why I'm so lost. I also don't see how to "release" a pointer either, so I don't know how to do that. From what I can tell in my search, no one has an example of how to do this.

[JaggerJo]

[matthewcrews]

Okay, so I did something silly and it works now. I added a color to the canvas and now everything works as intended.

Canvas.create [
    Canvas.background "DarkSlateGray" // <-- Adding this line makes it work
    // Rest of code here

UI looks like this now:

[JaggerJo]

Ahh, did not see this. Yeah, you need a non transparent background for it to fire (hit testing, yada yada 😄).

Capturing still is an interesting thing to know about.

[matthewcrews]

Agreed, I'm sure it will be useful at some point. And now there's an example of how to do it on the internet!

Also, good to know about needing a non-transparent Canvas for this to work.

[Numpsy]

I've never tried doing anything like this myself, but - does https://github.com/wieslawsoltes/NodeEditor do the sort of thing that you're trying?

[matthewcrews]

It does. I am trying to make something similar to that. I have a hard time following the code in that repo because it depends on using XAML/C#, which I am not as familiar with.