Merge branch 'next' of git://git.code.sf.net/p/flightgear/fgdata into next

Nasal/aircraft.nas

@@ -349,36 +349,39 @@ var data = {
 		me.path = getprop("/sim/fg-home") ~ "/aircraft-data/" ~ getprop("/sim/aircraft") ~ ".xml";
 		me.signalN = props.globals.getNode("/sim/signals/save", 1);
 		me.catalog = [];
-        me._timer = maketimer(60, me, me._save_);
+		me._timer = maketimer(60, me, me._save_);
 
 		setlistener("/sim/signals/reinit", func(n) {
-            if (n.getBoolValue() and getprop("/sim/startup/save-on-exit")) {
-                me._save_();
-            }
-        });
+			if (n.getBoolValue() and getprop("/sim/startup/save-on-exit")) {
+				me._save_();
+			}
+		});
 		setlistener("/sim/signals/exit", func {
-            if (getprop("/sim/startup/save-on-exit")) {
-                me._save_();
-            }
-        });
+			if (getprop("/sim/startup/save-on-exit")) {
+				me._save_();
+			}
+		});
+		return me;
 	},
-    
+
 	load: func {
 		if (io.stat(me.path) != nil) {
 			logprint(LOG_INFO, "loading aircraft data from ", me.path);
 			io.read_properties(me.path, props.globals);
 		}
+		return me;
 	},
-    
+
 	save: func(v = nil) {
 		if (v == nil) {
 			me._save_();
-            me._timer.stop();
+			me._timer.stop();
 		} else {
 			me._timer.restart(60 * v);
 		}
+		return me;
 	},
-    
+
 	_save_: func {
 		size(me.catalog) or return;
 		logprint(LOG_INFO, "saving aircraft data to ", me.path);
@@ -387,16 +390,26 @@ var data = {
 		foreach (var c; me.catalog) {
 			if (c[0] == `/`) {
 				c = substr(c, 1);
-            }
+			}
 			props.copy(props.globals.getNode(c, 1), data.getNode(c, 1));
 		}
 		io.write_properties(me.path, data);
 	},
-    
+
 	add: func(p...) {
 		foreach (var n; props.nodeList(p)) {
 			append(me.catalog, n.getPath());
-        }
+		}
+		return me;
+	},
+	remove: func(p...) {
+		foreach (var n; props.nodeList(p)) {
+			var i = vecindex(me.catalog, n.getPath());
+			if (i != nil) {
+				me.catalog = subvec(me.catalog, 0, i) ~ subvec(me.catalog, i + 1);
+			}
+		}
+		return me;
 	},
 };
 

Nasal/canvas/api/element.nas

@@ -237,7 +237,7 @@ var Element = {
     },
 
     _setupCenterNodes: func(cx = nil, cy = nil) {
-        if (me["_center"] == nil) {
+        if (me["_center"] == nil or (size(me._center) >= 1 and me._center[0] == nil) or (size(me._center) >= 2 and me._center[1] == nil)) {
             me["_center"] = [me._node.getNode("center[0]", cx != nil),
                              me._node.getNode("center[1]", cy != nil)];
         }

Nasal/canvas/gui.nas

@@ -39,6 +39,7 @@ loadGUIFile("styles/DefaultStyle.nas");
 # widgets
 loadWidget("Button");
 loadWidget("CheckBox");
+loadWidget("Dial");
 loadWidget("Label");
 loadWidget("LineEdit");
 loadWidget("List");

Nasal/canvas/gui/Menu.nas

@@ -39,6 +39,7 @@ gui.MenuItem = {
                 m._menu = nil;
                 m._parent_menu = nil;
                 m._is_menubar_item = 0;
+                m._mouseOver = 0;
 
                 m._setView(style.createWidget(parent, cfg.get("type", "menu-item"), cfg));
 
@@ -70,12 +71,18 @@ gui.MenuItem = {
                 }
                 me._unsetOthersHovered();
                 if (me._is_menubar_item and me._enabled) {
-                        me._hovered = 1;
-                        me.update();
-                        var x = e.screenX - e.localX;
-                        var y = e.screenY - e.localY;
-                        me._showMenu(x, y);
-                } elsif (me._parent_menu != nil) {
+                        if (!me._menu.isVisible()) {
+                                me._hovered = 1;
+                                me.update();
+                                var x = e.screenX - e.localX;
+                                var y = e.screenY - e.localY;
+                                me._showMenu(x, y);
+                        } else {
+                        	me._hovered = 0;
+                        	me.update();
+                                me._hideMenu();
+                        }
+                } elsif (me._parent_menu != nil and me._menu == nil) {
                         me._hovered = 0;
                         me.update();
                         me._parent_menu.hide();
@@ -99,6 +106,7 @@ gui.MenuItem = {
                         any_hovered |= me._parent_menu._layout.itemAt(i)._hovered;
                 }
                 me._unsetOthersHovered();
+                me._mouseOver = 1;
                 if ((!me._is_menubar_item or any_hovered) and me._enabled) {
                         me._hovered = 1;
                         me.update();
@@ -109,6 +117,7 @@ gui.MenuItem = {
         },
 
         onMouseLeave: func(e) {
+                me._mouseOver = 0;
                 if (me._menu == nil) {
                         me._hovered = 0;
                 }
@@ -132,18 +141,14 @@ gui.MenuItem = {
                         } elsif (me._menu_position == gui.MenuItem.MenuPosition.Left) {
                                 pos = [x - me._menu.getSize()[0], y];
                         }
-                        me._menu.setPosition(pos[0], pos[1]);
-                        me._menu.show();
+                        me._menu.show(pos[0], pos[1]);
                 }
-                me._hovered = 1;
         },
 
         _hideMenu: func {
                 if (me._menu) {
-                        me._menu.clearFocus();
-                        me._menu.hide();
+                        me._menu.hide(1);
                 }
-                me._hovered = 0;
         },
 
         setEnabled: func(enabled = 1) {
@@ -378,12 +383,22 @@ gui.Menu = {
 		append(gui.open_popups, me);
         },
 
-        hide: func {
+        # @description Hide the menu (force should only be set to 1 from within the click handler of menu items)
+        hide: func(force=0) {
                 if (me._parent_item != nil) {
-                        me._parent_item._hovered = 0;
-                        me._parent_item.update();
+                        if (
+                                force or
+                                me._parent_item._parent_menu == nil or
+                                me._parent_item._parent_menu._view._root._node.getValue("id") != "menu-bar" or
+                                me._parent_item._mouseOver == 0
+                        ) {
+                                me._parent_item._hovered = 0;
+                                me._parent_item.update();
+                                call(me.parents[1].hide, [], me);
+                        }
+                } else {
+                        call(me.parents[1].hide, [], me);
                 }
-                call(me.parents[1].hide, [], me);
         },
 
         # @description Destructor

Nasal/canvas/gui/dialogs/WidgetsFactoryDialog.nas

@@ -221,6 +221,48 @@ var WidgetsFactoryDialog = {
 		})
 			.setValue(42);
 		m.numericControlsTab.addItem(m.slider);
+		
+		m.dialBox = HBoxLayout.new();
+		m.dialBox.setContentsMargin(10);
+		m.numericControlsTab.addItem(m.dialBox);
+		
+		m.dial = gui.widgets.Dial.new(m.tabsContent, style, {
+			"min-value": 5,
+			"max-value": 50,
+			"step-size": 0.5,
+			"page-size": 5,
+			"tick-step": 2,
+			"show-value": 0,
+			"show-ticks": 0,
+			"value": 14,
+			"value-format": "%.1f",
+			"wrap": 0,
+		});
+		m.dialBox.addItem(m.dial);
+		
+		m.dialOptionsBox =VBoxLayout.new();
+		m.dialBox.addItem(m.dialOptionsBox);
+		m.dialShowValueCheckBox = gui.widgets.CheckBox.new(m.tabsContent, canvas.style, {})
+						.setText("Show value")
+						.listen("toggled", func(e) {
+							m.dial.setShowValue(e.detail.checked);
+						});
+		m.dialShowValueCheckBox.setAlignment(canvas.AlignTop);
+		m.dialOptionsBox.addItem(m.dialShowValueCheckBox);
+		m.dialShowTicksCheckBox = gui.widgets.CheckBox.new(m.tabsContent, canvas.style, {})
+						.setText("Show ticks")
+						.listen("toggled", func(e) {
+							m.dial.setShowTicks(e.detail.checked);
+						});
+		m.dialShowTicksCheckBox.setAlignment(canvas.AlignTop);
+		m.dialOptionsBox.addItem(m.dialShowTicksCheckBox);
+		m.dialWrapCheckBox = gui.widgets.CheckBox.new(m.tabsContent, canvas.style, {})
+						.setText("Wrap value")
+						.listen("toggled", func(e) {
+							m.dial.setWrap(e.detail.checked);
+						});
+		m.dialWrapCheckBox.setAlignment(canvas.AlignTop);
+		m.dialOptionsBox.addItem(m.dialWrapCheckBox);
 
 
 		return m;

Nasal/canvas/gui/styles/DefaultStyle.nas

@@ -1138,6 +1138,205 @@ DefaultStyle.widgets.slider = {
   }
 };
 
+DefaultStyle.widgets.dial = {
+  new: func(parent, cfg) {
+    me._root = parent.createChild("group", "dial");
+    me._knob = me._root.createChild("path", "dial-knob");
+    me._handle = me._root.createChild("image", "dial-handle");
+    me._handleTranslateTransform = me._handle.createTransform();
+    me._value = me._root.createChild("text", "dial-value")
+            .set("font", "LiberationFonts/LiberationSans-Regular.ttf")
+            .set("character-size", me._style.getSize("dial-value-font-size", me._style.getSize("base-font-size", 14)))
+            .set("alignment", "center-center")
+            .setText(0);
+    me._ticks = me._root.createChild("path", "dial-ticks");
+
+    me._maxValueWidth = 20;
+  },
+
+  _updateLayoutSizes: func(model) {
+    var handleSize = me._handle.imageSize()[1];
+    var borderHandleMargin = math.clamp(
+      math.min(model._size[0], model._size[1]) * 0.0625,
+      2,
+      me._style.getSize("dial-border-handle-margin", 8),
+    );
+    var valueSize = [0, 0];
+    var valueHandleMargin = me._style.getSize("dial-value-handle-margin", 5);
+    if (model._showValue) {
+      valueSize = [
+        me._maxValueWidth + valueHandleMargin * 2,
+        me._style.getSize("dial-value-font-size", me._style.getSize("base-font-size", 14)) + valueHandleMargin * 2
+      ];
+    } else {
+      valueSize = me._style.getSize("dial-center-handle-margin", 2) * 2;
+      valueSize = [valueSize, valueSize];
+    }
+    var minW = borderHandleMargin * 2 + valueSize[0] + handleSize * 2;
+    var minH = borderHandleMargin * 2 + valueSize[1] + handleSize * 2;
+    var length = math.max(minW, minH);
+    if (model._showTicks) {
+      length += me._style.getSize("dial-knob-ticks-margin", 2) + me._style.getSize("dial-ticks-length", 10);
+    }
+    model.setLayoutMinimumSize([length, length]);
+  },
+
+  setSize: func(model, length) {
+    var knobTicksMargin = me._style.getSize("dial-knob-ticks-margin", 2);
+    var ticksLength = me._style.getSize("dial-ticks-length", 10);
+    var knobRadius = (length - me._style.getSize("dial-knob-border-width", 1)) / 2;
+    var halfLength = length / 2;
+    if (model._showTicks) {
+      knobRadius -= knobTicksMargin + ticksLength;
+    }
+    me._knob.reset()
+            .circle(knobRadius, halfLength, halfLength);
+    me._value.setTranslation(
+      halfLength,
+      halfLength
+    );
+    var handleOffset = [
+      halfLength - me._handle.imageSize()[0] / 2,
+      math.clamp(knobRadius * 0.125, 2, me._style.getSize("dial-border-handle-margin", 8))
+    ];
+    if (model._showTicks) {
+      handleOffset[1] += knobTicksMargin + ticksLength;
+    }
+    me._handleTranslateTransform.setTranslation(handleOffset[0], handleOffset[1]);
+    me._handle.setCenter(
+      me._handle.imageSize()[0] / 2,
+      halfLength - handleOffset[1]
+    );
+    var degreesRange = 360;
+    var nowrapMargin = me._style.getSize("dial-nowrap-margin-deg", 30); 
+    var offset = 0;
+    if (!model._wraps) {
+      degreesRange -= nowrapMargin;
+      offset = nowrapMargin / 2;
+    }
+    me._handle.setRotation((model._normValue() * degreesRange + offset) * D2R);
+    me._drawTicks(model);
+  },
+
+  _drawTicks: func(model) {
+    var length = math.min(model._size[0], model._size[1]);
+    var halfLength = length / 2;
+    var knobTicksMargin = me._style.getSize("dial-knob-ticks-margin", 2);
+    var ticksLength = me._style.getSize("dial-ticks-length", 10);
+    var knobRadius = (length - me._style.getSize("dial-knob-border-width", 1)) / 2 - knobTicksMargin - ticksLength;
+    
+    var degreesRange = 360;
+    var nowrapMargin = me._style.getSize("dial-nowrap-margin-deg", 30);
+    var offset = 0;
+    if (!model._wraps) {
+      degreesRange -= nowrapMargin;
+      offset = nowrapMargin / 2;
+    }
+    var range = model._maxValue - model._minValue;
+    var center = [halfLength, halfLength];
+    var degreesPerTickStep = (degreesRange / range) * model._tickStep;
+    var lengthBegin = knobRadius + knobTicksMargin;
+    var lengthEnd = lengthBegin + ticksLength;
+    me._ticks.reset();
+
+    for (var i = 0; i < degreesRange / degreesPerTickStep; i += 1) {
+      var radians = (i * degreesPerTickStep + offset) * D2R;
+      var sin = math.sin(radians);
+      var cos = -math.cos(radians);
+      var start = [center[0] + sin * lengthBegin, center[1] + cos * lengthBegin];
+      var tick = [center[0] + sin * lengthEnd, center[1] + cos * lengthEnd];
+      me._ticks.moveTo(start[0], start[1]).lineTo(tick[0], tick[1]);
+    }
+  },
+
+  _updateMaxValueWidth: func(model) {
+    if (model._valueFormat != nil) {
+      me._value.setText(sprintf(model._valueFormat, model._minValue));
+      var min = me._value.maxWidth();
+      me._value.setText(sprintf(model._valueFormat, model._maxValue));
+      var max = me._value.maxWidth();
+      me._value.setText(sprintf(model._valueFormat, model._minValue + model._stepSize));
+      var minStep = me._value.maxWidth();
+      me._value.setText(sprintf(model._valueFormat, model._value));
+    } else {
+      me._value.setText(model._minValue);
+      var min = me._value.maxWidth();
+      me._value.setText(model._maxValue);
+      var max = me._value.maxWidth();
+      me._value.setText(model._minValue + model._stepSize);
+      var minStep = me._value.maxWidth();
+      me._value.setText(model._value);
+    }
+    me._maxValueWidth = math.max(min, max, minStep);
+  },
+
+  setValue: func(model, value) {
+    var degreesRange = 360;
+    var nowrapMargin = me._style.getSize("dial-nowrap-margin-deg", 30); 
+    var offset = 0;
+    if (!model._wraps) {
+      degreesRange -= nowrapMargin;
+      offset = nowrapMargin / 2;
+    }
+    me._handle.setRotation((model._normValue() * degreesRange + offset) * D2R);
+    if (model._valueFormat != nil) {
+      me._value.setText(sprintf(model._valueFormat, value));
+    } else {
+      me._value.setText(value);
+    }
+  },
+
+  update: func(model) {
+    var color_name = model._windowFocus() ? "fg_color" : "backdrop_fg_color";
+    me._value.set("fill", me._style.getColor(color_name));
+
+    color_name = "dial_knob_bg";
+    if (!model._enabled) {
+      color_name ~= "_disabled";
+    } elsif (model._focused and model._windowFocus()) {
+      color_name ~= "_focused";
+    } elsif (!model._windowFocus()) {
+      color_name ~= "_backdrop";
+    }
+    if (model._hover and model._enabled and model._windowFocus()) {
+      color_name ~= "_hovered";
+    }
+    me._knob.set("fill", me._style.getColor(color_name));
+    
+    color_name = "dial_knob_border";
+    if (!model._enabled) {
+      color_name ~= "_disabled";
+    } elsif (model._focused and model._windowFocus()) {
+      color_name ~= "_focused";
+    }
+    if (model._hover and model._enabled and model._windowFocus()) {
+      color_name ~= "_hovered";
+    }
+    me._knob.set("stroke", me._style.getColor(color_name));
+    
+    var file = me._style._dir_widgets ~ "/dial-handle";
+    if (!model._enabled) {
+      file ~= "-disabled";
+    } elsif (model._handleDown) {
+      file ~= "-down";
+    }
+    me._handle.set("src", file ~ ".png");
+
+    me._ticks.set("stroke", me._style.getColor("dial_ticks"));
+
+    if (model._showValue) {
+      me._value.show();
+    } else {
+      me._value.hide();
+    }
+    if (model._showTicks) {
+      me._ticks.show();
+    } else {
+      me._ticks.hide();
+    }
+  }
+};
+
 DefaultStyle.widgets["menu-item"] = {
 	new: func(parent, cfg) {
 		me._root = parent.createChild("group", "menu-item");

Nasal/canvas/gui/widgets/ComboBox.nas

@@ -54,7 +54,7 @@ gui.widgets.ComboBox = {
     var index = 0;
     foreach(var i; me._items) {
       if (i.menuValue == value) {
-        setCurrentByIndex(index);
+        me.setCurrentByIndex(index);
         break;
       }
 
@@ -68,13 +68,32 @@ gui.widgets.ComboBox = {
     if (me._currentIndex == index)
       return;
 
-    if (index >= size(me._items)) {
-      logprint(DEV_WARN, "Canvas.Gui ComboBox: invalid index passed to setCUrrentByIndex" ~ index);
+    if (index >= size(me._items) or index < 0) {
+      logprint(DEV_WARN, "Canvas.Gui ComboBox: invalid index passed to setCurrentByIndex" ~ index);
       return;
     }
 
     me._currentIndex = index;
     me._view.setText(me, me._items[index].text());
+    me._trigger("selected-item-changed", {"index": index, "text": me._items[index].text(), "value": me._items[index].menuValue});
+  },
+
+  findByValue: func(value) {
+    for (var i = 0; i < size(me._items); i += 1) {
+      if (me._items[i].menuValue == value) {
+        return i;
+      }
+    }
+    return -1;
+  },
+
+  findByText: func(text) {
+    for (var i = 0; i < size(me._items); i += 1) {
+      if (me._items[i].text() == text) {
+        return i;
+      }
+    }
+    return -1;
   },
 
   setDown: func(down = 1)
@@ -115,7 +134,9 @@ gui.widgets.ComboBox = {
     el.addEventListener("click", func(e) {
       if (me._enabled) {
         me.setDown(!me._down);
-        me._openMenu(e.screenX - e.localX, e.screenY - e.localY + me._size[1]);
+        if (me._down) {
+          me._openMenu(e.screenX - e.localX, e.screenY - e.localY + me._size[1]);
+        }
       }
     });
   },

Nasal/canvas/gui/widgets/Dial.nas

@@ -1,61 +1,195 @@
+# Dial.nas : show a user-rotable dial knob
+# with optional tick marks and value display
 # SPDX-FileCopyrightText: (C) 2022 James Turner <james@flightgear.org>
 # SPDX-License-Identifier: GPL-2.0-or-later
 
 gui.widgets.Dial = {
-  new: func(parent, style, cfg)
-  {
-    var cfg = Config.new(cfg);
+  new: func(parent, style = nil, cfg = nil) {
+    style = style or canvas.style;
     var m = gui.Widget.new(gui.widgets.Dial);
+    m._cfg = Config.new(cfg or {});
     m._focus_policy = m.StrongFocus;
-    m._down = 0;
-    m._minValue = 0;
-    m._maxValue = cfg.get("max-value", 100);
-    m._value = 50;
+    m._minValue = m._cfg.get("min-value", 0);
+    m._maxValue = m._cfg.get("max-value", 100);
+    m._value = m._mouseValue = m._cfg.get("value", 50);
+    m._stepSize = m._cfg.get("step-size", 1);
+    m._pageSize = m._cfg.get("page-size", 10);
+    m._tickStep = m._cfg.get("tick-step", 10);
+    m._showTicks = m._cfg.get("show-ticks", 0);
+    m._showValue = m._cfg.get("show-value", 1);
+    m._valueFormat = m._cfg.get("value-format", nil);
+    m._wraps = m._cfg.get("wrap", 0);
 
-    m._wraps = cfg.get("wrap", 0);
-    m._pageStep = cfg.get("page-step", 0);
-    m._numTicks = cfg.get("tick-count", 0);
-    m._tickStyle = cfg.get("ticks-style", 0);
+    m._handleDown = 0;
+    m._lastMouseAngle = 0;
+    m._dragging = 0;
 
-    # todo : optional value display in the center
-
-    if( style != nil ) {
-      m._setView( style.createWidget(parent, cfg.get("type", "slider"), cfg) );
-      m._view.updateRanges(m._minValue, m._maxValue, m._numTicks);
-    }
+    m._setView(style.createWidget(parent, m._cfg.get("type", "dial"), m._cfg));
+    m.setValueFormat(m._valueFormat);
+    m.setValue(m._value);
+    m.setMinValue(m._minValue);
+    m.setMaxValue(m._maxValue);
+    m.setShowTicks(m._showTicks);
+    m.setShowValue(m._showValue);
+    m._onStateChange();
 
     return m;
   },
 
-  setValue: func(val)
-  {
-    if( me._view != nil ) {
-      me._view.setNormValue(me._normValue());
+  setShowTicks: func(showTicks) {
+    me._showTicks = showTicks;
+    me._view._updateLayoutSizes(me);
+    me._onStateChange();
+  },
+
+  setShowValue: func(showValue) {
+    me._showValue = showValue;
+    me._view._updateLayoutSizes(me);
+    me._onStateChange();
+  },
+
+  setWrap: func(wrap) {
+    me._wraps = wrap;
+    me._view.setValue(me, me._value);
+    me._view._drawTicks(me);
+  },
+
+  setSize: func(w, h) {
+    var size = math.min(w, h);
+    me._size[0] = size;
+    me._size[1] = size;
+
+    me._view.setSize(me, size, size);
+    return me;
+  },
+
+  setValueFormat: func(format) {
+    me._valueFormat = format;
+    me._view._updateMaxValueWidth(me);
+    me._view._updateLayoutSizes(me);
+    me.setValue(me._value);
+  },
+
+  setValue: func(value) {
+    value = math.clamp(value, me._minValue, me._maxValue);
+    me._view.setValue(me, value);
+    if (me._value != value) {
+      me._value = value;
+      me._trigger("value-changed", {"value": value});
     }
     return me;
   },
 
-  
+  setMinValue: func(minValue) {
+    me._minValue = minValue;
+    me._view._updateMaxValueWidth(me);
+    me._view._updateLayoutSizes(me);
+    me._view._drawTicks(me);
+  },
+
+  setMaxValue: func(maxValue) {
+    me._maxValue = maxValue;
+    me._view._updateMaxValueWidth(me);
+    me._view._updateLayoutSizes(me);
+    me._view._drawTicks(me);
+  },
 
 # protected:
-  _setView: func(view)
-  {
+  _setView: func(view) {
     call(gui.Widget._setView, [view], me);
 
-    # var el = view._root;
-    # el.addEventListener("mousedown", func if( me._enabled ) me.setDown(1));
-    # el.addEventListener("mouseup",   func if( me._enabled ) me.setDown(0));
-    # el.addEventListener("click",     func if( me._enabled ) me.toggle());
+    var el = view._root;
+    
+    el.addEventListener("drag", func(e) {
+      me._dragDial(e);
+      e.stopPropagation();
+    });
+    el.addEventListener("mousedown", func(e) {
+      me._handleDown = 1;
+      me._dragDial(e);
+      me._onStateChange();
+    });
+    el.addEventListener("mouseup", func(e) {
+      me._handleDown = 0;
+      me._dragging = 0;
+      me._onStateChange();
+    });
+    el.addEventListener("mouseleave", func(e) {
+      me._handleDown = 0;
+      me._dragging = 0;
+      me._onStateChange();
+    });
+    el.addEventListener("wheel", func(e) {
+      if (!me._enabled) {
+        return;
+      }
 
-    # el.addEventListener("mouseleave",func me.setDown(0));
-    # el.addEventListener("drag", func(e) e.stopPropagation());
+      me.setValue(me._value + e.deltaY * me._stepSize);
+      e.stopPropagation();
+    });
+    el.addEventListener("keydown", func(e) {
+      var value = me._value;
+      if (contains([
+        keyboard.FunctionKeys.Left, keyboard.FunctionKeys.KP_Left,
+        keyboard.FunctionKeys.Down, keyboard.FunctionKeys.KP_Down,
+        keyboard.PrintableKeys.Minus, keyboard.FunctionKeys.KP_Subtract,
+      ], e.keyCode)) {
+        value -= me._stepSize;
+      } elsif (contains([
+        keyboard.FunctionKeys.Right, keyboard.FunctionKeys.KP_Right,
+        keyboard.FunctionKeys.Up, keyboard.FunctionKeys.KP_Up,
+        keyboard.PrintableKeys.Plus, keyboard.FunctionKeys.KP_Add,
+      ], e.keyCode)) {
+        value += me._stepSize;
+      } elsif (contains([keyboard.FunctionKeys.Page_Down, keyboard.FunctionKeys.KP_Page_Down], e.keyCode)) {
+        value -= me._pageSize;
+      } elsif (contains([keyboard.FunctionKeys.Page_Up, keyboard.FunctionKeys.KP_Page_Up], e.keyCode)) {
+        value += me._pageSize;
+      } elsif (contains([keyboard.FunctionKeys.Home, keyboard.FunctionKeys.KP_Home], e.keyCode)) {
+        value = me._minValue;
+      } elsif (contains([keyboard.FunctionKeys.End, keyboard.FunctionKeys.KP_End], e.keyCode)) {
+        value = me._maxValue;
+      }
+      me.setValue(value);
+    });
+  },
+
+  _dragDial: func(e) {
+    if (!me._enabled) {
+      return;
+    }
+    var vr =  me._view._root;
+
+    var localPos = vr.canvasToLocal([e.clientX - me._size[0] / 2, e.clientY - me._size[1] / 2]);
+    var mouseAngle = math.atan2(localPos[0], -localPos[1]) * R2D + 180;
+    var deltaAngle = math.periodic(-180, 180, mouseAngle - me._lastMouseAngle);
+    me._lastMouseAngle = mouseAngle;
+    if (!me._dragging) {
+      me._dragging = 1;
+      return;
+    }
+    
+    var value = me._mouseValue + (me._maxValue - me._minValue) * (deltaAngle / 360);
+    if (!me._wraps) {
+      if (value > me._maxValue) {
+        value = me._maxValue;
+      } elsif (value < me._minValue) {
+        value = me._minValue;
+      }
+    } else {
+      value = math.periodic(me._minValue, me._maxValue, value);
+    }
+    me._mouseValue = value;
+    if (me._stepSize != 0) {
+      value = math.round(value / me._stepSize) * me._stepSize;
+    }
+    me.setValue(value);
   },
 
   # return value as its normalised equivalent
-  _normValue: func
-  {
+  _normValue: func {
     var range = me._maxValue - me._minValue;
     var v = math.clamp(me._value, me._minValue, me._maxValue) - me._minValue;
     return v / range;
-  }
+  },
 };

Nasal/canvas/gui/widgets/PropertyWidgets.nas

@@ -3,8 +3,8 @@
 # SPDX-FileCopyrightText: (C) 2022 Frederic Croix <thefgfseagle@gmail.com>
 # SPDX-License-Identifier: GPL-2.0-or-later
 
-gui.widgets.PropertySwitch = {
-	new: func(parent, style = nil, cfg = nil) {
+gui.widgets.PropertyWidget = {
+	new: func(base, parent, style = nil, cfg = nil) {
 		style = style or canvas.style;
 		cfg = cfg or {};
 		if (cfg["node"] == nil) {
@@ -13,18 +13,37 @@ gui.widgets.PropertySwitch = {
 		if (!isa(cfg["node"], props.Node)) {
 			cfg["node"] = props.globals.getNode(cfg["node"], 1);
 		}
-		
-		var m = gui.widgets.Switch.new(parent, style, cfg);
-		m._checkable = 1;
+		var m = base.new(parent, style, cfg);
+		m.parents = [gui.widgets.PropertyWidget] ~ m.parents;
 		m._node = cfg["node"];
+		m._propertySynced = 1;
+		
+		return m;
+	},
+	
+	setPropertySynced: func(synced = 1) {
+		me._propertySynced = synced;
+	},
+};
 
-		append(m.parents, gui.widgets.PropertySwitch);
+gui.widgets.PropertySwitch = {
+	new: func(parent, style = nil, cfg = nil) {
+		var m = gui.widgets.PropertyWidget.new(gui.widgets.Switch, parent, style, cfg);
+		m._checkable = 1;
+
+		m.parents = [gui.widgets.PropertySwitch] ~ m.parents;
 		
 		m.setChecked(m._node.getBoolValue());
 		m.listen("toggled", func(e) {
+			if (!m._propertySynced) {
+				return;
+			}
 			m._node.setBoolValue(int(e.detail.checked));
 		});
 		m._listener = setlistener(m._node, func(n) {
+			if (!m._propertySynced) {
+				return;
+			}
 			m.setChecked(n.getBoolValue());
 		}, 1, 0);
 		
@@ -38,26 +57,22 @@ gui.widgets.PropertySwitch = {
 
 gui.widgets.PropertyButton = {
 	new: func(parent, style = nil, cfg = nil) {
-		style = style or canvas.style;
-		cfg = cfg or {};
-		if (cfg["node"] == nil) {
-			die("Missing configuration 'node' field");
-		}
-		if (!isa(cfg["node"], props.Node)) {
-			cfg["node"] = props.globals.getNode(cfg["node"], 1);
-		}
-		
-		var m = gui.widgets.Button.new(parent, style, cfg);
+		var m = gui.widgets.PropertyWidget.new(gui.widgets.Button, parent, style, cfg);
 		m._checkable = 1;
-		m._node = cfg["node"];
 
-		append(m.parents, gui.widgets.PropertyButton);
+		m.parents = [gui.widgets.PropertyButton] ~ m.parents;
 		
 		m.setChecked(m._node.getBoolValue());
 		m.listen("toggled", func(e) {
+			if (!m._propertySynced) {
+				return;
+			}
 			m._node.setBoolValue(int(e.detail.checked));
 		});
 		m._listener = setlistener(m._node, func(n) {
+			if (!m._propertySynced) {
+				return;
+			}
 			m.setChecked(n.getBoolValue());
 		}, 1, 0);
 		
@@ -77,8 +92,12 @@ gui.widgets.PropertyRadioButtonsGroup = {
 		var m = gui.widgets.RadioButtonsGroup.new(name);
 		m.parents = [gui.widgets.PropertyRadioButtonsGroup] ~ m.parents;
 		m._node = node;
+		m._propertySynced = 1;
 		m._ignore_radio_toggles = 0;
 		m._nodeListener = setlistener(node, func(n) {
+			if (!m._propertySynced) {
+				return;
+			}
 			m._ignore_radio_toggles = 1;
 			var value = node.getValue();
 			foreach (var radio; m.radios) {
@@ -92,6 +111,10 @@ gui.widgets.PropertyRadioButtonsGroup = {
 		});
 	},
 	
+	setPropertySynced: func(synced = 1) {
+		me._propertySynced = synced;
+	},
+	
 	_onRadioToggled: func {
 		if (me._ignore_radio_toggles) {
 			return;
@@ -100,33 +123,39 @@ gui.widgets.PropertyRadioButtonsGroup = {
 		foreach (var radio; me.radios) {
 			radio._trigger("group-checked-radio-changed", {checkedRadio: checked});
 		}
-		m._node.setValue(checked != nil ? checked.getData("property-value") : nil);
+		if (m._propertySynced) {
+			m._node.setValue(checked != nil ? checked.getData("property-value") : nil);
+		}
 	},
 };
 
 gui.widgets.PropertyRadioButton = {
 	new: func(parent, style = nil, cfg = nil) {
-		style = style or canvas.style;
 		cfg = cfg or {};
-		cfg["radioButtonGroupClass"] = gui.widgets.PropertyRadioButtonsGroup;
 		if (cfg["node"] == nil) {
 			die("Missing configuration 'node' field");
 		}
 		if (!isa(cfg["node"], props.Node)) {
 			cfg["node"] = props.globals.getNode(cfg["node"], 1);
 		}
+		cfg["radioButtonGroup"] = gui.widgets.PropertyRadioButtonsGroup.new(cfg["node"]);
 		
-		var m = gui.widgets.RadioButton.new(parent, style, cfg);
+		var m = gui.widgets.PropertyWidget.new(gui.widgets.RadioButton, parent, style, cfg);
 		m._checkable = 1;
-		m._node = cfg["node"];
 
-		append(m.parents, gui.widgets.PropertyRadioButton);
+		m.parents = [gui.widgets.PropertyRadioButton] ~ m.parents;
 		
 		m.setChecked(m._node.getBoolValue());
 		m.listen("toggled", func(e) {
+			if (!m._propertySynced) {
+				return;
+			}
 			m._node.setBoolValue(int(e.detail.checked));
 		});
 		m._listener = setlistener(m._node, func(n) {
+			if (!m._propertySynced) {
+				return;
+			}
 			m.setChecked(n.getBoolValue());
 		}, 1, 0);
 		
@@ -140,26 +169,24 @@ gui.widgets.PropertyRadioButton = {
 
 gui.widgets.PropertyList = {
 	new: func(parent, style = nil, cfg = nil) {
-		if (cfg["node"] == nil) {
-			die("Missing configuration 'node' field");
-		}
-		if (!isa(cfg["node"], props.Node)) {
-			cfg["node"] = props.globals.getNode(cfg["node"], 1);
-		}
-		
-		var m = gui.widgets.List.new(parent, style, cfg);
+		var m = gui.widgets.PropertyWidget.new(gui.widgets.List, parent, style, cfg);
 		m._checkable = 1;
-		m._node = cfg["node"];
 
-		append(m.parents, gui.widgets.PropertyList);
+		m.parents = [gui.widgets.PropertyList] ~ m.parents;
 		
 		if (str(m.findItemByData(m._node.getValue()))) {
 			m.setItemSelection(m.findItemByData("property-value", m._node.getValue()));
 		}
 		m.listen("selection-changed", func(e) {
+			if (!m._propertySynced) {
+				return;
+			}
 			m._node.setValue(m.getSelectedItems()[0].getData("property-value"));
 		});
 		m._listener = setlistener(m._node, func(n) {
+			if (!m._propertySynced) {
+				return;
+			}
 			if (str(m.findItemByData("property-value", n.getValue()))) {
 				m.setItemSelection(m.findItemByData("property-value", n.getValue()));
 			}
@@ -173,80 +200,162 @@ gui.widgets.PropertyList = {
 	},
 };
 
-gui.widgets.PropertyLabel = {
+gui.widgets.PropertyComboBox = {
 	new: func(parent, style = nil, cfg = nil) {
-		style = style or canvas.style;
-		cfg = cfg or {};
-		if (cfg["node"] == nil) {
-			die("Missing configuration 'node' field");
-		}
-		if (!isa(cfg["node"], props.Node)) {
-			cfg["node"] = props.globals.getNode(cfg["node"], 1);
-		}
-		var m = gui.widgets.Label.new(parent, style, cfg);
+		var m = gui.widgets.PropertyWidget.new(gui.widgets.ComboBox, parent, style, cfg);
 		m._checkable = 1;
-		m._node = cfg["node"];
-		
-		append(m.parents, gui.widgets.PropertyLabel);
-		
-		m.setText(m._node.getValue());
-		m._listener = setlistener(m._node, func(n) {
-			m.setText(n.getValue());
-		}, 1, 0);
-	}
-};
 
-
-gui.widgets.PropertyLineEdit = {
-	new: func(parent, style = nil, cfg = nil) {
-		style = style or canvas.style;
-		cfg = cfg or {};
-		if (cfg["node"] == nil) {
-			die("Missing configuration 'node' field");
-		}
-		if (!isa(cfg["node"], props.Node)) {
-			cfg["node"] = props.globals.getNode(cfg["node"], 1);
-		}
-		var m = gui.widgets.LineEdit.new(parent, style, cfg);
-		m._checkable = 1;
-		m._node = cfg["node"];
+		m.parents = [gui.widgets.PropertyComboBox] ~ m.parents;
 		
-		append(m.parents, gui.widgets.PropertyLineEdit);
-		
-		m.setText(m._node.getValue());
-		m.listen("text-changed", func(e) {
-			m._node.setValue(m.getText());
+		m.setCurrentByValue(m._node.getValue());
+		m.listen("selected-item-changed", func(e) {
+			if (!m._propertySynced) {
+				return;
+			}
+			m._node.setValue(e.detail.value);
 		});
 		m._listener = setlistener(m._node, func(n) {
-			m.setText(n.getValue());
-		}, 1, 0);
-	}
-};
-
-gui.widgets.PropertyCheckBox = {
-	new: func(parent, style = nil, cfg = nil) {
-		style = style or canvas.style;
-		cfg = cfg or {};
-		if (cfg["node"] == nil) {
-			die("Missing configuration 'node' field");
-		}
-		if (!isa(cfg["node"], props.Node)) {
-			cfg["node"] = props.globals.getNode(cfg["node"], 1);
-		}
-		
-		var m = gui.widgets.CheckBox.new(parent, style, cfg);
-		m._checkable = 1;
-		m._node = cfg["node"];
-
-		append(m.parents, gui.widgets.PropertyCheckBox);
-		
-		m.setChecked(m._node.getBoolValue());
-		m.listen("toggled", func(e) {
-			m._node.setBoolValue(int(e.detail.checked));
-		});
-		m._listener = setlistener(m._node, func(n) {
-			m.setChecked(n.getBoolValue());
-		}, 1, 0);
+			if (!m._propertySynced) {
+				return;
+			}
+			if (n.getValue() != m._items[m._currentIndex].menuValue) {
+				m.setCurrentByValue(n.getValue());
+			}
+		}, 0, 0);
+		
+		return m;
+	},
+	
+	del: func {
+		removelistener(me._listener);
+	},
+};
+
+gui.widgets.PropertyLabel = {
+	new: func(parent, style = nil, cfg = nil) {
+		var m = gui.widgets.PropertyWidget.new(gui.widgets.Label, parent, style, cfg);
+		m._checkable = 1;
+		
+		m.parents = [gui.widgets.PropertyLabel] ~ m.parents;
+		
+		m.setText(m._node.getValue());
+		m._listener = setlistener(m._node, func(n) {
+			if (!m._propertySynced) {
+				return;
+			}
+			m.setText(n.getValue());
+		}, 0, 0);
+	},
+	
+	del: func {
+		removelistener(m._listener);
+	},
+};
+
+
+gui.widgets.PropertyLineEdit = {
+	new: func(parent, style = nil, cfg = nil) {
+		var m = gui.widgets.PropertyWidget.new(gui.widgets.LineEdit, parent, style, cfg);
+		m._checkable = 1;
+		
+		m.parents = [gui.widgets.PropertyLineEdit] ~ m.parents;
+		
+		m.setText(m._node.getValue());
+		m.listen("text-changed", func(e) {
+			if (!m._propertySynced) {
+				return;
+			}
+			m._node.setValue(m.getText());
+		});
+		m._listener = setlistener(m._node, func(n) {
+			if (!m._propertySynced) {
+				return;
+			}
+			m.setText(n.getValue());
+		}, 0, 0);
+	},
+	
+	del: func {
+		removelistener(m._listener);
+	},
+};
+
+gui.widgets.PropertyCheckBox = {
+	new: func(parent, style = nil, cfg = nil) {
+		var m = gui.widgets.PropertyWidget.new(gui.widgets.CheckBox, parent, style, cfg);
+		m._checkable = 1;
+
+		m.parents = [gui.widgets.PropertyCheckBox] ~ m.parents;
+		
+		m.setChecked(m._node.getBoolValue());
+		m.listen("toggled", func(e) {
+			if (!m._propertySynced) {
+				return;
+			}
+			m._node.setBoolValue(int(e.detail.checked));
+		});
+		m._listener = setlistener(m._node, func(n) {
+			if (!m._propertySynced) {
+				return;
+			}
+			m.setChecked(n.getBoolValue());
+		}, 0, 0);
+		
+		return m;
+	},
+	
+	del: func {
+		removelistener(me._listener);
+	},
+};
+
+gui.widgets.PropertySlider = {
+	new: func(parent, style = nil, cfg = nil) {
+		var m = gui.widgets.PropertyWidget.new(gui.widgets.Slider, parent, style, cfg);
+
+		m.parents = [gui.widgets.PropertySlider] ~ m.parents;
+		
+		m.setValue(m._node.getValue());
+		m.listen("value-changed", func(e) {
+			if (!m._propertySynced) {
+				return;
+			}
+			m._node.setValue(num(e.detail.value));
+		});
+		m._listener = setlistener(m._node, func(n) {
+			if (!m._propertySynced) {
+				return;
+			}
+			m.setValue(n.getValue());
+		}, 0, 0);
+		
+		return m;
+	},
+	
+	del: func {
+		removelistener(me._listener);
+	},
+};
+
+gui.widgets.PropertyDial = {
+	new: func(parent, style = nil, cfg = nil) {
+		var m = gui.widgets.PropertyWidget.new(gui.widgets.Dial, parent, style, cfg);
+
+		m.parents = [gui.widgets.PropertyDial] ~ m.parents;
+		
+		m.setValue(m._node.getValue());
+		m.listen("value-changed", func(e) {
+			if (!m._propertySynced) {
+				return;
+			}
+			m._node.setValue(num(e.detail.value));
+		});
+		m._listener = setlistener(m._node, func(n) {
+			if (!m._propertySynced) {
+				return;
+			}
+			m.setValue(n.getValue());
+		}, 0, 0);
 		
 		return m;
 	},

gui/styles/AmbianceClassic/style.xml

@@ -317,6 +317,78 @@
 			<green type="float">0.5</green>
 			<blue type="float">0.5</blue>
 		</slider_ticks>
+
+		<dial_knob_bg>
+			<red type="float">0.949</red>
+			<green type="float">0.945</green>
+			<blue type="float">0.941</blue>
+		</dial_knob_bg>
+
+		<dial_knob_bg_backdrop>
+			<red type="float">0.934</red>
+			<green type="float">0.930</green>
+			<blue type="float">0.926</blue>
+		</dial_knob_bg_backdrop>
+
+		<dial_knob_bg_focused>
+			<red type="float">0.966</red>
+			<green type="float">0.962</green>
+			<blue type="float">0.958</blue>
+		</dial_knob_bg_focused>
+
+		<dial_knob_bg_hovered>
+			<red   type="float">0.966</red>
+			<green type="float">0.962</green>
+			<blue  type="float">0.988</blue>
+		</dial_knob_bg_hovered>
+
+		<dial_knob_bg_focused_hovered>
+			<red   type="float">0.986</red>
+			<green type="float">0.982</green>
+			<blue  type="float">0.998</blue>
+		</dial_knob_bg_focused_hovered>
+
+		<dial_knob_bg_disabled>
+			<red type="float">0.89</red>
+			<green type="float">0.89</green>
+			<blue type="float">0.89</blue>
+		</dial_knob_bg_disabled>
+
+		<dial_knob_border>
+			<red type="float">0.6</red>
+			<green type="float">0.6</green>
+			<blue type="float">0.6</blue>
+		</dial_knob_border>
+
+		<dial_knob_border_hovered>
+			<red type="float">0.65</red>
+			<green type="float">0.65</green>
+			<blue type="float">0.65</blue>
+		</dial_knob_border_hovered>
+
+		<dial_knob_border_focused>
+			<red type="float">0.83</red>
+			<green type="float">0.54</green>
+			<blue type="float">0.43</blue>
+		</dial_knob_border_focused>
+
+		<dial_knob_border_focused_hovered>
+			<red type="float">0.79</red>
+			<green type="float">0.41</green>
+			<blue type="float">0.25</blue>
+		</dial_knob_border_focused_hovered>
+
+		<dial_knob_border_disabled>
+			<red type="float">0.71</red>
+			<green type="float">0.71</green>
+			<blue type="float">0.71</blue>
+		</dial_knob_border_disabled>
+
+		<dial_ticks>
+			<red type="float">0.5</red>
+			<green type="float">0.5</green>
+			<blue type="float">0.5</blue>
+		</dial_ticks>
 	</colors>
 
 	<sizes>