question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How can the key down event in the Diagram be suppressed from propagating into the child nodes?

See original GitHub issue

Repo: https://github.com/mrakgr/helix/blob/bae32b6b1c6ed609e7889fbcf46d1cc56124f046/Helix.Fun/Helix.Nodes.fs#L140

type HelixDiagramBase(Js : IJSRuntime, opts) as this =
    inherit Diagram(opts)
    
    let redo = Stack()
    let undo = Stack()
    
    let mutable is_loaded = false
    let mutable is_handler_active = true
    
    let handler_template f x =
        if is_handler_active then
            undo.Push(f x)
            redo.Clear()
    do 
        this.Nodes.add_Added (handler_template U_NodeAdded); this.Nodes.add_Removed (handler_template U_NodeRemoved)
        this.Links.add_Added (handler_template U_LinkAdded); this.Links.add_Removed (handler_template U_LinkAdded)
    
    do this.add_KeyDown (fun ev ->
        match ev.Key.ToLower() with
        | "z" when ev.CtrlKey && ev.ShiftKey -> this.Redo()
        | "z" when ev.CtrlKey -> this.Undo()
        | _ -> ()
        )

I need to suppress this keydown event from propagating after it has been handled, but I don’t know how. The undo is causing an component to be selected inadvertently. Check out the video to see what I mean.

https://github.com/Blazor-Diagrams/Blazor.Diagrams/assets/6266635/5d38de2a-5db7-4434-a210-596a091529fc

Issue Analytics

  • State:closed
  • Created 4 months ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
zHaytamcommented, Jun 4, 2023

In order to do what you want (a.k.a not have the browser undo too), you need to preventDefault on the shortcuts of the browser.

Check out https://stackoverflow.com/questions/39802159/disable-chromes-text-input-undo-redo-ctrlz-ctrly for an example

This isn’t really possible in Blazor right now so your only solution is to do this in JS and prevent any shortcuts you don’t want the browser to do, but you can still act on the events yourself in F# and do your Undo logic there.

0reactions
mrakgrcommented, Jun 4, 2023

And for your first suggestion, do you mean the selection changed event on the diagram itself? Wouldn’t that just give me a list of the selected components? How could I use that to prevent the default on the diagram?

Oh, nevermind, I see what you mean. It has a bool property, that is for when the canvas is selected, right? So I could use this to set a global variable on the JS side, and have it act as a switch in the event handler, I think that is what you mean.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Document keydown event propagates to a input child with ...
I have a problem with document event keydown. When i pressed on specifics keys (1 or 2), the event keydown propagates to input...
Read more >
UIElement.KeyDown Event (System.Windows)
Controls that inherit KeyDown can provide handling for the event that acts as handler for all instances, by overriding the OnKeyDown method.
Read more >
UI Events
A mousedown event is dispatched immediately after the user presses down a button on a pointing device (typically a mouse). One possible default ......
Read more >
Node — Godot Engine (stable) documentation in English
When a node is added to the scene tree, it receives the NOTIFICATION_ENTER_TREE notification and its _enter_tree callback is triggered. Child nodes are...
Read more >
Chapter 14 Handling Events
The "mousedown" and "mouseup" events are similar to "keydown" and "keyup" and fire when the button is pressed and released. These will happen...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found