structure GUI improvements (beta4.2.7)

[Neon22]

Below are a few UI interaction speedup suggestions:

1. Toggling fields with only two possibilities:

   • Please consider toggling the value, rather than showing a dropdown, if a field has only two choices.
     • E.g. in Satin. if Facing says "weft facing" then clicking on the value would have the intent (easily reversible) of toggling the value to "warp facing"
     • If there are more than two options then keep the existing dropdown.
   • The widget could select which control to use on the basis of the number of items in the menu field.

2. Numeric input fields:

   • In the Chrome Browser the mouse wheel can be used to auto inc/dec a numeric field.
   • the current control does change but the widget is not updated. subsequent mouse wheel rolls are interpreted as scrolls.
   • this is a super useful way to adjust numeric inputs.

3. Repositioning a widget:

   • When the handle for the widget is grabbed to move it - the widget jumps.
   • the handle is repositioned at the 0,0 upper left corner of the widget rather than using the location chosen by the user.
   • A temporary offset can be calculated by storing the mouse pos relative to the widget when the mousemove begins and subtracting that value whilst dragging, then forgetting that value when mouseup occurs.

[Devendork]

Thanks for these. I'll provide some rationale for the decisions I made so far. I'd love to hear what you think with this additional context.

1. Toggling
I'm assuming most users to AdaCAD at the moment are new and many already find the interface overwhelming. With that in mind, I've tried to err on the side of more explanation over speed of use. That became the reasoning for using drop downs instead of toggles. I felt that the toggles became hard to understand for some users. Also, some people were confused about what the outcome of the toggle would be from changing (or detecting what change was made). The dropdown gave me space to be a little more wordy in my explanation of what this toggle would do. I imagine over time, it might shift back to a true toggle, but I think I'll likely stick with the drop downs for now.

2. Numeric Mouse Fields
Thanks for the pointer on this one. I don't have a mouse wheel so I missed this, I can add a quick fix to the code to handle and update based on these events (though, it might be worth noting that on some more complicated workflows, updating after every change might cause some computation slowdowns).

3. Repositioning
The jumping widgets is a known problem - sigh. I have wrestled with angluar's default drag and drop and have to make some workarounds to make it all work with the scaling on the workspace. Once I got it working at all, I had to take a break for my sanity :) I have noticed this really bugs people so It's on my list to get back to fixing soon.

Thank you again for all your comments and engagement, I really appreciate it.

[Neon22]

Absolutely - these are just suggestions :)
BTW I really like the current Beta design.

My way of thinking about the GUI (no idea if it has an official designation or not) is:

• Stuff you can see on the screen - should have some idea of what its for - like a node network, a form, a button, ...
• Can I read, and infer from that, what a thing is for.
• If I mouseover an item - can it show what will be affected if I click on it:
  • E.g. maybe I can draw a highlight over it. E.g. say its "number of shafts" - draw a highlight over the vertical numbered column which will be growing in size if this number is incremented
  • or if its not meaningful to do directly - then can I maybe show a tooltip telling what it will do.
    • Tooltips are good because I can gear them towards new users and if I put a top level toggle to turn them off, then they don't visually impact regular users.
    • also it may be possible to put a help button on the tooltip - depending on your framework - and so keep the help button off the GUI to minimize visual noise. might not be possible (or more work to make your own modal... sigh)
• "clicking" (or whatever action) on an item changes all the things.

This is only a slight refinement on your approach where you show/open the dropdown directly on mouseover.

SO:

1. So a slightly modified UI approach could be:

   • mouseover shows tooltip
   • on click
     • if there is only two states - toggle,
     • else - show dropdown and second click chooses.
   • This means one more click than your current design but more information can be presented on mouseover.

2. mousewheel

   • may be as simple as adding duplicate event handler:
     • `xxxx.on("wheel", the event) # ensure Chrome handles wheel events

3. Repositioning

   • was looking for my code (but python so bear with me):

# These 3 track resize handle.
# in JS these would be vars
g_h_selected = None         # The event.target that I mean to move (not always the same as the clicked on item)
g_h_selected_offset = None  # The initial mouse offset so it can appear seamless (list containing x,y)

### start drag event
def start_drag(event):
    """
    Used when we do initial mousedown and start to Drag:
    - calc offsets for simple math adj of moving element
    """
    global g_h_selected, g_h_selected_offset
    g_h_selected = event.target
    # I use a special function to get the mouse position because here I'm inside an SVG container
    g_h_selected_offset = get_mouse_position(event, g_h_selected)

### The event called when actually dragging
def resize_draft(event):
    """
    Active mouse motion while dragging
    - resize the draft_bg etc
    - g_h_selected will be "#handle"
    """
    if g_h_selected:  # because I have other stuff going on...
        x,y = get_mouse_position(event, g_h_selected)
        # check and maybe clamp to max,min size (one day maybe)
        offset = [x - g_h_selected_offset[0], y - g_h_selected_offset[1]]
        
        # do stuff now I have correct offset calculated so it looks like the item moves from where I clicked it.

### end of drag
# I just set the globals to False

You probably only need to worry about the initial mousedown offset and then adding/subtracting that into the drag motion data to make it look like you're dragging it from where it was initially clicked on.

BTW: Your "Get started" link at https://docs.adacad.org/ is 404.