Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Keyboard focus within DrawPane

    I'd like to implement some focusing features within a DrawPane.

    In particular I'd like to elect a subset of its draw items as focusable and support traversing that set with usual focus control conventions (TAB for moving focus to next focusable elem, SHIFT+TAB for moving focus to previous one).
    Actually I don't see any focus related method in DrawItem, while DrawPane provides the canFocus property and many other focus related methods considering the canvas as a single focusable widget, while in my case I want to propagate focus handling to draw items.

    Is there any existing support for this kind of scenario?

    If not I'd go for implementing from scratch some virtual focus features within the drawpane this way:
    * add a field holding a reference to the focused item
    * provide some visual representation (i.e. a dotted rectangle around the virtually focused elem)
    * maintain some sort of structure that gives me the next/previous virtually focusable item references
    * add a KeyPressHandler to intercept keyboard events and eventually dispatch them to the relevant virtually focused
    * add a FocusChangedHandler to control the virtual focus activation

    #2
    The elements drawn by a DrawPane have no native browser support for having keyboard focus.

    So you basically would have to introduce some other kind of element, like a TextItem placed offscreen, which actually has the focus and is not visible to the user. Really, you'd need a trio of such items, so that you could detect tab keyPresses moving focus into the next or preceding TextItem.

    Then you could in some way visually indicate the focus for the user, perhaps by brightening the border color on some shapes.

    This is moderately complicated, and might not be the best approach depending on what you're trying to accomplish, which you left pretty vague.

    Comment


      #3
      Many thanks for the suggestions.
      About my goal I'm happy to talk about it: I'm implementing an alternative tree widget based on the drawing library, as I depicted in a dedicated thread. I don't need to support editing directly on the draw items, but I need the focus in order to put in place some keyboard shortcuts for navigation and invoking actions.
      So, since elements drawn by a DrawPane have no native browser support for having keyboard focus, I have to implement a virtual focus system to introduce some pseudo-focus features on DrawItems. It should feature some visual representation of the focus and act accordingly to the standard focusing behaviors.

      Honestly I didn't seriously consider using hidden TextItem before, but I guess it could be really a good way to capture the keyboard focus.
      So if I understood correctly the solution you proposed I should
      * introduce 3 visible TextItem rendered behind the DrawPane (actually not visible to user)
      * add to them some KeyPressedListeners in order to listen for tab key presses moving focus to next or preceding focusable element.
      * use those events to drive the virtual focus into my virtually focusable tree elements (bringing every time the actual focus back to the middle text item)

      The following example represents the draw items on the draw pane and the text items. In this example the Child 1 element has the virtual focus, while the real focus is on the text item in the middle.
      In this scenario when the user presses the TAB key the real focus moves to the text item on the right: this event is used to intercept the focus move and move the virtual focus to Child 2. The real focus is contextually brought back to the text item in the middle.

      Code:
      Drawpane with virtually focused draw item
      
                                 /--------------\
                                 |              |   
                                 |     Root     |   
                                 |              |   
                                 \------+-------/   
                                        |           
                +-----------------------+-----------------------+ 
                |                                               | 
        /═══════+══════\                                /-------+------\ 
        ║              ║                                |              | 
        ║   Child 1    ║                                |   Child 2    | 
        ║              ║                                |              | 
        \══════════════/                                \--------------/ 
      
      
      
      
      
      Visible text items rendered behind the draw pane
       -----------        ------------        ------------    
      |           |      |native focus|      |           |   
       -----------        ------------        ------------
      I'm just wondering if using FocusHandlers/BlurHandlers instead of detecting tab keyPresses would ease the job of intercepting virtual focus move.
      Last edited by d.cavestro; 16 May 2014, 02:25.

      Comment


        #4
        Easier that keyPress or focus/blur would be editorEnter.

        Comment

        Working...
        X