Canvas widgets: style for Slider

Only horizontal mode for now, and not quite right visually,
but usable enough to start with.

Nasal/canvas/gui/dialogs/WidgetsFactoryDialog.nas

@@ -84,6 +84,15 @@ var WidgetsFactoryDialog = {
 						});
 		m.tab_2.addItem(m.resize_button, 5);
 		
+		m.numericControlsTab = VBoxLayout.new();
+		m.tabs.addTab("ncTab", "Numeric Controls", m.numericControlsTab);
+		m.slider = gui.widgets.Slider.new(m.tabsContent, style, 
+			{"max-value" : 100,
+			 "page-step" : 20,
+			 "tick-count" : 10})
+			.setValue(42);
+		m.numericControlsTab.addItem(m.slider);
+
 		return m;
 	},
 	

Nasal/canvas/gui/styles/DefaultStyle.nas

@@ -709,61 +709,87 @@ DefaultStyle.widgets.frame = {
 
 };
 
-# a horionztal or vertical slider, for selecting /
+# a horizontal or vertical slider, for selecting /
 # dragging over a numerical range
 DefaultStyle.widgets.slider = {
   new: func(parent, cfg)
   {
     me._root = parent.createChild("group", "slider");
     me._createElement("bg", "image")
-       .set("slice", "10 10");
+       .set("slice", "2 6");
 
-     me._createElement("thumb", "image")
-       .set("slice", "10 10");
+    me._createElement("fill", "image")
+       .set("slice", "2 6");
 
-      me._ticks = 0;
-      me._ticksPath = nil;
+    me._fillHeight = me._fill.imageSize()[1];
+    me._createElement("thumb", "image");
+    me._thumbSize = me._thumb.imageSize();
+
+    me._ticks = 0;
+    me._ticksPath = nil;
   },
 
   setNormValue: func(model, normValue)
   {
     var (w, h) = model._size;
-    var availWidthPos = w - h; # pixel range the thumb can move over
-    me._thumb.setTranslation(round(availWidthPos * normValue), 0);
+    var halfThumbWidth =  me._thumbSize[0] * 0.5;
+    var availWidthPos = w - me._thumbSize[0];
+    var thumbX = math.round(availWidthPos * normValue);
+    var thumbY = (h - me._thumbSize[1]) * 0.5;
+    me._thumb.setTranslation(thumbX - halfThumbWidth, thumbY);
+    me._fill.setSize(thumbX, me._fillHeight);
   },
 
   update: func(model)
   {
+    var direction = "horizontal";
   # set background state
     var file = me._style._dir_widgets ~ "/";
-    file ~= "backdrop-";
+    file ~= "scale-" ~ direction ~ "-trough";
     if( !model._enabled )
       file ~= "-disabled";
 
     me._bg.set("src", file ~ ".png");
     
+  # fill state
+    var file = me._style._dir_widgets ~ "/";
+    file ~= "scale-" ~ direction ~ "-fill";
+    if( !model._enabled ) {
+      file ~= "-disabled";
+    } else {
+ 
+    }
+
+    me._fill.set("src", file ~ ".png");
+
   # set thumb state
     file = me._style._dir_widgets ~ "/";
-    file ~= "button-";  # should we use a seperate thumb?
-    if( !model._enabled )
+    file ~= "slider-" ~ direction;  
+    if( !model._enabled ) {
       file ~= "-disabled";
-    else if (model._down)
-      file ~= "-down";
-    elsif (model._hover)
-      file ~= "-hovered";
+    } else {
+      if (model._down)
+        file ~= "-focused";
+      if (model._hover)
+        file ~= "-hover";
+    }
 
     me._thumb.set("src", file ~ ".png");
     
-  # set thumb size
-    var (w, h) = model._size;
-    # fixme assumes horizonal for now
-    me._thumb.setSize(h, h);
-
   # update the position as well, since other stuff
   # may have changed
     me.setNormValue(model, model._normValue());
   },
 
+  setSize: func(model, w, h)
+  {
+    var fillTop = (h - me._fillHeight) * 0.5;
+    me._bg.setTranslation(0, fillTop);
+    me._fill.setTranslation(0, fillTop);
+    me._bg.setSize(w, me._fillHeight);
+    me.setNormValue(model, model._normValue());
+  },
+
   updateRanges: func(minValue, maxValue, numTicks = 0)
   {
     if (me._ticks != numTicks) {

Nasal/canvas/gui/widgets/Slider.nas

@@ -22,36 +22,62 @@ gui.widgets.Slider = {
     # TODO : select where value is shown
     # TODO : select where tick marks are shown
 
-    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, cfg.get("type", "slider"), cfg) );
+    m._view.updateRanges(m._minValue, m._maxValue, m._numTicks);
 
     return m;
   },
 
   setValue: func(val)
   {
+    me._value = val;
     if( me._view != nil ) {
-      me._view.setNormValue(me._normValue());
+      me._view.setNormValue(me, me._normValue());
     }
     return me;
   },
 
-  
+  setDown: func(down = 1)
+  {
+    if (me._down == down )
+      return me;
+
+    me._down = down;
+    me._onStateChange();
+    return me;
+  },
 
 # protected:
   _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));
+    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());
+    el.addEventListener("mouseleave",func me.setDown(0));
+    
+    view._thumb.addEventListener("drag", func(e) {
+      me._dragThumb(e);
+      e.stopPropagation();
+    });
+  },
 
-    # el.addEventListener("mouseleave",func me.setDown(0));
-    # el.addEventListener("drag", func(e) e.stopPropagation());
+  _dragThumb: func(event)
+  { 
+    var vr =  me._view._root;
+    var viewPosX = vr.canvasToLocal([event.clientX, event.clientY])[0];
+    var width = me._size[0];
+
+    if (viewPosX < 0) {
+      me.setValue(me._minValue);
+    } elsif (viewPosX > width) {
+      me.setValue(me._maxValue);
+    } else {
+      var norm = viewPosX / width;
+      me.setValue(norm * ( me._maxValue - me._minValue));
+    }
   },
 
   # return value as its normalised equivalent