Request: Editable Properties Bar

[Christian-Me]

For what I think the properties bar should look and feel is following the same scheme most config dialog already look like

1. two column layout: property and value
2. objects will group values with a (collapsible) header
3. arrays will have a header with an add and remove button to add a value (GOTO 1) or object (GOTO 2)
4. custom elements were the node can add what ever is necessary

Perhaps this screenshot makes the similarities clear

Left ... an organized mess, right organized but unfiltered with a lot of background noise

The schema could contain (things that pop into my head now ...)

• property
• human readable label
• value type(s) (see typedInput) with limits and other definitions according to the type
  • all types possible by typed input
  • color
  • size (width) or height / width (as dashboard widgets)
  • ....
  • user defined widgets
• validation callback per value (to give a kinds of freedom)
• validation per node (as soon as the node loses focus)
• callback as soon as the node gets focus and the properties bar is or will be displayed
• callbacks for all kinds of events (onClick, onChange ...)
• callbacks for add and remove elements in an array
• placeholders
• tooltips / context sensitive help
• styles like visible / disabled or other css stuff
• allow or prohibit edit together with other nodes

should be controllable in a cascading style (inherit from parent if not defined)

If more than one node of the same type is selected then properties can be edited together. If they have different values it is indicated but can be still edited (if allowed by the schema). If different types are selected the user can filter them by type or only common properties like enable or dashboard groups.

To avoid a inconsistent user experience the config dialog can contain the same "widget" but with a more flexible style (no table, more or exactly the Node-RED standard styling). Objects can go into tabs, arrays into editable list ...). Or still use an individual UI.

Here are some examples of my day to day work: (Autocad, changes are done "live")

or (Revit, wirh an "Apply" button and many popup dialogs "Edit ..." )

Blender / Freecad (similar) both with a tree view like Node-RED (which I would use more if it expands to the selected node by itself)

Here a little bit in action: Nothing selected, one line, two lines / changing the color together)

Or web based:

Not from my daily experience: And last and least VisualBasic (But with a help window- Really useful)

OK perhaps a stupid idea.