fgdata/Nasal/canvas/gui/styles/DefaultStyle.nas

var DefaultStyle = {
  new: func(name, name_icon_theme)
  {
    return {
      parents: [ gui.Style.new(name, name_icon_theme),
                 DefaultStyle ]
    };
  },
  createWidget: func(parent, type, cfg)
  {
    var factory = me.widgets[type];
    if( factory == nil )
    {
      debug.warn("DefaultStyle: unknown widget type (" ~ type ~ ")");
      return nil;
    }

    var w = {
      parents: [factory],
      _style: me
    };
    call(factory.new, [parent, cfg], w);
    return w;
  },
  widgets: {}
};

# A button
DefaultStyle.widgets.button = {
  new: func(parent, cfg)
  {
    me._root = parent.createChild("group", "button");
    me._bg =
      me._root.createChild("path");
    me._border =
      me._root.createChild("image", "button")
              .set("slice", "10 12"); #"7")
    me._label =
      me._root.createChild("text")
              .set("font", "LiberationFonts/LiberationSans-Regular.ttf")
              .set("character-size", 14)
              .set("alignment", "center-baseline");
  },
  setSize: func(model, w, h)
  {
    me._bg.reset()
          .rect(3, 3, w - 6, h - 6, {"border-radius": 5});
    me._border.setSize(w, h);
  },
  setText: func(model, text)
  {
    me._label.setText(text);

    var min_width = math.max(80, me._label.maxWidth() + 16);
    model.setLayoutMinimumSize([min_width, 16]);
    model.setLayoutSizeHint([min_width, 28]);

    return me;
  },
  update: func(model)
  {
    var backdrop = !model._windowFocus();
    var (w, h) = model._size;
    var file = me._style._dir_widgets ~ "/";

    # TODO unify color names with image names
    var bg_color_name = "button_bg_color";
    if( backdrop )
      bg_color_name = "button_backdrop_bg_color";
    else if( !model._enabled )
      bg_color_name = "button_bg_color_insensitive";
    else if( model._down )
      bg_color_name = "button_bg_color_down";
    else if( model._hover )
      bg_color_name = "button_bg_color_hover";
    me._bg.set("fill", me._style.getColor(bg_color_name));

    if( backdrop )
    {
      file ~= "backdrop-";
      me._label.set("fill", me._style.getColor("backdrop_fg_color"));
    }
    else
      me._label.set("fill", me._style.getColor("fg_color"));
    file ~= "button";

    if( model._down )
    {
      file ~= "-active";
      me._label.setTranslation(w / 2 + 1, h / 2 + 6);
    }
    else
      me._label.setTranslation(w / 2, h / 2 + 5);

    if( model._enabled )
    {
      if( model._focused and !backdrop )
        file ~= "-focused";

      if( model._hover and !model._down )
        file ~= "-hover";
    }
    else
      file ~= "-disabled";

    me._border.set("src", file ~ ".png");
  }
};

# A checkbox
DefaultStyle.widgets.checkbox = {
  new: func(parent, cfg)
  {
    me._label_position = cfg.get("label-position", "right");
    me._root = parent.createChild("group", "checkbox");
    me._icon =
      me._root.createChild("image", "checkbox-icon")
              .setSize(18, 18);
    me._label =
      me._root.createChild("text")
              .set("font", "LiberationFonts/LiberationSans-Regular.ttf")
              .set("character-size", 14)
              .set("alignment", "left-center");
  },
  setSize: func(model, w, h)
  {
    if (me._label_position == "left") {
      me._label.setTranslation(3, int((h / 2) + 1));
      me._icon.setTranslation(w - 24, int((h - 18) / 2));
    } else {
      me._icon.setTranslation(3, int((h - 18) / 2));
      me._label.setTranslation(24, int(h / 2) + 1);
    }

    return me;
  },
  setText: func(model, text)
  {
    me._label.setText(text);

    var min_width = me._label.maxWidth() + 3 + 24;
    model.setLayoutMinimumSize([min_width, 18]);
    model.setLayoutSizeHint([min_width, 24]);

    return me;
  },
  update: func(model)
  {
    var backdrop = !model._windowFocus();
    var (w, h) = model._size;
    var file = me._style._dir_widgets ~ "/";

    if( backdrop )
    {
      file ~= "backdrop-";
      me._label.set("fill", me._style.getColor("backdrop_fg_color"));
    }
    else
      me._label.set("fill", me._style.getColor("fg_color"));
    file ~= "check";

    if( model._down )
      file ~= "-selected";
    else
      file ~= "-unselected";

    if( model._enabled )
    {
      if( model._hover )
        file ~= "-hover";
    }
    else
      file ~= "-disabled";

    me._icon.set("src", file ~ ".png");
  }
};

# A checkbox
DefaultStyle.widgets["radio-button"] = {
  new: func(parent, cfg) {
    me._root = parent.createChild("group", "radio-button");
    me._bg = me._root.createChild("path");
    me._icon = me._root.createChild("group", "radio-button-icon");
    me._icon_background = me._icon.createChild("path", "radio-button-icon-border")
            .circle(8.5, 9, 9);
    me._icon_selected_indicator = me._icon.createChild("path", "radio-button-icon-selected-indicator")
            .circle(6, 9, 9)
            .set("stroke-width", 5);
    me._icon_border = me._icon.createChild("path", "radio-button-icon-border")
            .circle(8, 9, 9)
            .set("stroke-width", 1);
    me._label = me._root.createChild("text")
            .set("font", "LiberationFonts/LiberationSans-Regular.ttf")
            .set("character-size", 14)
            .set("alignment", "left-center");
  },
  setSize: func(model, w, h) {
    me._bg.reset().rect(0, 0, w, h);
    me._icon.setTranslation(3, int((h - 18) / 2));
    me._label.setTranslation(24, int(h / 2) + 1);

    return me;
  },
  setText: func(model, text) {
    me._label.setText(text);

    var min_width = me._label.maxWidth() + 3 + 24;
    model.setLayoutMinimumSize([min_width, 24]);
    model.setLayoutSizeHint([min_width, 24]);

    return me;
  },
  update: func(model) {
    var backdrop = !model._windowFocus();
    
    me._bg.set("fill", me._style.getColor("radio_button_bg_color" ~ (model._hover ? "_hovered" : "")));

    me._icon_border.set("stroke", me._style.getColor("radio_button_selected_indicator_border_color"));
    if (backdrop) {
      me._label.set("fill", me._style.getColor("backdrop_fg_color"));
    } else {
      me._label.set("fill", me._style.getColor("fg_color"));
    }

    if (model._checked) {
      me._icon_selected_indicator.show();
    } else {
      me._icon_selected_indicator.hide();
    }

    if (model._enabled) {
      if (model._hover) {
        me._icon_background.set("fill", me._style.getColor("radio_button_selected_indicator_bg_color_hovered"));
      } else {
        me._icon_background.set("fill", me._style.getColor("radio_button_selected_indicator_bg_color"));
      }
      me._icon_selected_indicator.set("stroke", me._style.getColor("radio_button_selected_indicator_color"));
    } else {
      me._icon_background.set("fill", me._style.getColor("radio_button_selected_indicator_bg_color_disabled"));
      me._icon_selected_indicator.set("stroke", me._style.getColor("radio_button_selected_indicator_color_disabled"));
    }
  }
};

# A label
DefaultStyle.widgets.label = {
  new: func(parent, cfg)
  {
    me._root = parent.createChild("group", "label");
  },
  setSize: func(model, w, h)
  {
    if( me['_bg'] != nil )
      me._bg.reset().rect(0, 0, w, h);
    if( me['_img'] != nil )
      me._img.set("size[0]", w)
             .set("size[1]", h);
    if( me['_text'] != nil )
    {
      # TODO different alignment
      me._text.setTranslation(2, 2 + h / 2);
      me._text.set(
        "max-width",
        model._cfg.get("wordWrap", 0) ? (w - 4) : 0
      );
    }
    return me;
  },
  setText: func(model, text)
  {
    if ( !isstr(text) or size(text) == 0 )
    {
      model.setHeightForWidthFunc(nil);
      return me._deleteElement('text');
    }

    me._createElement("text", "text")
      .setText(text);

    var hfw_func = nil;
    var min_width = me._text.maxWidth() + 4;
    var width_hint = min_width;

    if( model._cfg.get("wordWrap", 0) )
    {
      var m = me;
      hfw_func = func(w) m.heightForWidth(w);
      min_width = math.min(32, min_width);

      # prefer approximately quadratic text blocks
      if( width_hint > 24 )
        width_hint = int(math.sqrt(width_hint * 24));
    }

    model.setHeightForWidthFunc(hfw_func);
    model.setLayoutMinimumSize([min_width, 14]);
    model.setLayoutSizeHint([width_hint, 24]);

    return me.update(model);
  },
  setImage: func(model, img)
  {
    if( img == nil or size(img) == 0 )
      return me._deleteElement('img');

    me._createElement("img", "image")
      .set("src", img)
      .set("preserveAspectRatio", "xMidYMid slice");

    return me;
  },
  # @param bg CSS color or 'none'
  setBackground: func(model, bg)
  {
    if( bg == nil or bg == "none" )
      return me._deleteElement("bg");

    me._createElement("bg", "path")
      .set("fill", bg);

    me.setSize(model, model._size[0], model._size[1]);
    return me;
  },
  heightForWidth: func(w)
  {
    if( me['_text'] == nil )
      return -1;

    return math.max(14, me._text.heightForWidth(w - 4));
  },
  update: func(model)
  {
    if( me['_text'] != nil )
    {
      var color_name = model._windowFocus() ? "fg_color" : "backdrop_fg_color";
      me._text.set("fill", me._style.getColor(color_name));
    }
  },
# protected:
  _createElement: func(name, type)
  {
    var mem = '_' ~ name;
    if( me[ mem ] == nil )
    {
      me[ mem ] = me._root.createChild(type, "label-" ~ name);

      if( type == "text" )
      {
         me[ mem ].set("font", "LiberationFonts/LiberationSans-Regular.ttf")
                  .set("character-size", 14)
                  .set("alignment", "left-center");
      }
    }
    return me[ mem ];
  },
  _deleteElement: func(name)
  {
    name = '_' ~ name;
    if( me[ name ] != nil )
    {
      me[ name ].del();
      me[ name ] = nil;
    }
    return me;
  }
};

# A one line text input field
DefaultStyle.widgets["line-edit"] = {
  new: func(parent, cfg)
  {
    me._hpadding = cfg.get("hpadding", 8);

    me._root = parent.createChild("group", "line-edit");
    me._border =
      me._root.createChild("image", "border")
              .set("slice", "10 12"); #"7")
    me._text =
      me._root.createChild("text", "input")
              .set("font", "LiberationFonts/LiberationSans-Regular.ttf")
              .set("character-size", 14)
              .set("alignment", "left-baseline")
              .set("clip-frame", Element.PARENT);
    me._cursor =
      me._root.createChild("path", "cursor")
              .set("stroke", "#333")
              .set("stroke-width", 1)
              .moveTo(me._hpadding, 5)
              .vert(10);
    me._hscroll = 0;
  },
  setSize: func(model, w, h)
  {
    me._border.setSize(w, h);
    me._text.set(
      "clip",
      "rect(0, " ~ (w - me._hpadding) ~ ", " ~ h ~ ", " ~ me._hpadding ~ ")"
    );
    me._cursor.setDouble("coord[2]", h - 10);

    return me.update(model);
  },
  setText: func(model, text)
  {
    me._text.setText(text);
    model._onStateChange();
  },
  update: func(model)
  {
    var backdrop = !model._windowFocus();
    var file = me._style._dir_widgets ~ "/";

    if( backdrop )
      file ~= "backdrop-";

    file ~= "entry";

    if( !model._enabled )
      file ~= "-disabled";
    else if( model._focused and !backdrop )
      file ~= "-focused";

    me._border.set("src", file ~ ".png");

    var color_name = backdrop ? "backdrop_fg_color" : "fg_color";
    me._text.set("fill", me._style.getColor(color_name));

    me._cursor.setVisible(model._enabled and model._focused and !backdrop);

    var width = model._size[0] - 2 * me._hpadding;
    var cursor_pos = me._text.getCursorPos(0, model._cursor)[0];
    var text_width = me._text.getCursorPos(0, me._text.lineLength(0))[0];

    if( text_width <= width )
      # fit -> align left (TODO handle different alignment)
      me._hscroll = 0;
    else if( me._hscroll + cursor_pos > width )
      # does not fit, cursor to the right
      me._hscroll = width - cursor_pos;
    else if( me._hscroll + cursor_pos < 0 )
      # does not fit, cursor to the left
      me._hscroll = -cursor_pos;
    else if( me._hscroll + text_width < width )
      # does not fit, limit scroll to align with right side
      me._hscroll = width - text_width;

    var text_pos = me._hscroll + me._hpadding;

    me._text
      .setTranslation(text_pos, model._size[1] / 2 + 5)
      .update();
    me._cursor
      .setDouble("coord[0]", text_pos + cursor_pos)
      .update();
  }
};

# ScrollArea
DefaultStyle.widgets["scroll-area"] = {
  new: func(parent, cfg)
  {
    me._root = parent.createChild("group", "scroll-area");

    me._bg     = me._root.createChild("path", "background")
                         .set("fill", "#e0e0e0");
    me.content = me._root.createChild("group", "scroll-content")
                         .set("clip-frame", Element.PARENT);
    me.vert  = me._newScroll(me._root, "vert");
    me.horiz = me._newScroll(me._root, "horiz");
  },
  setColorBackground: func
  {
    if( size(arg) == 1 )
    	  var arg = arg[0];
    	me._bg.setColorFill(arg);
  },
  update: func(model)
  {
    me.horiz.reset();
    if( model._max_scroll[0] > 1 )
      # only show scroll bar if horizontally scrollable
      me.horiz.moveTo( model._scroller_offset[0] + model._scroller_pos[0],
                       model._size[1] - 2 )
              .horiz(model._scroller_size[0]);

    me.vert.reset();
    if( model._max_scroll[1] > 1 )
      # only show scroll bar if vertically scrollable
      me.vert.moveTo( model._size[0] - 2,
                      model._scroller_offset[1] + model._scroller_pos[1] )
             .vert(model._scroller_size[1]);

    me._bg.reset()
          .rect(0, 0, model._size[0], model._size[1]);
    me.content.set(
      "clip",
      "rect(0, " ~ model._size[0] ~ ", " ~ model._size[1] ~ ", 0)"
    );
  },
# private:
  _newScroll: func(el, orient)
  {
    return el.createChild("path", "scroll-" ~ orient)
             .set("stroke", "#f07845")
             .set("stroke-width", 4);
  },
  # Calculate size and limits of scroller
  #
  # @param model
  # @param dir 0 for horizontal, 1 for vertical
  # @return [scroller_size, min_pos, max_pos]
  _updateScrollMetrics: func(model, dir)
  {
    if( model._content_size[dir] <= model._size[dir] )
      return;

    model._scroller_size[dir] =
      math.max(
        12,
        model._size[dir] * (model._size[dir] / model._content_size[dir])
      );
    model._scroller_offset[dir] = 0;
    model._scroller_delta[dir] = model._size[dir] - model._scroller_size[dir];
  }
};

DefaultStyle.widgets["tab-widget"] = {
	tabBarHeight: 30,
	new: func(parent, cfg) {
		me._root = parent.createChild("group", "tab-widget");
		me.bg = me._root.createChild("path", "background")
					.set("fill", "#e0e0e0");
		me.tabBar = me._root.createChild("group", "tab-widget-tabbar");
		me.content = me._root.createChild("group", "tab-widget-content");
	},
	
	update: func(model) {
		me.bg.set("fill", me._style.getColor("bg_color"));
		me.tabBar.update();
		me.content.update();
	},
	
	setSize: func(model, w, h) {
		me.bg.reset().rect(0, w, h, 0);
		me.content.setTranslation(0, me.tabBarHeight);
	},
};

# Tab button for the tab widget
DefaultStyle.widgets["tab-widget-tab-button"] = {
	new: func(parent, cfg) {
		me._root = parent.createChild("group", "tab-widget-tab-button");
		me._bg = me._root.createChild("path")
						.set("fill", me._style.getColor("tab_widget_tab_button_bg_focused"))
						.set("stroke", me._style.getColor("tab_widget_tab_button_border"))
						.set("stroke-width", 1);
		me._selected_indicator = me._root.createChild("path")
						.set("stroke-width", 4);
		me._label = me._root.createChild("text")
						.set("font", "LiberationFonts/LiberationSans-Regular.ttf")
						.set("character-size", 14)
						.set("alignment", "center-baseline");
	},
	
	setSize: func(model, w, h) {
		me._bg.reset().rect(3, 0, w - 6, h);
		me._selected_indicator.reset().moveTo(3, h - 2).horiz(w - 6);
		me._label.setTranslation(w / 2, h / 2 + 5);
	},
	
	setText: func(model, text) {
		me._label.setText(text);

		var min_width = math.max(80, me._label.maxWidth() + 16);
		model.setLayoutMinimumSize([min_width, 30]);
		model.setLayoutSizeHint([min_width, 30]);

		return me;
	},
	
	update: func(model) {
		var backdrop = !model._windowFocus();
		var (w, h) = model._size;
		
		var bg_color_name = "tab_widget_tab_button_bg_focused";
		if (backdrop) {
			bg_color_name = "tab_widget_tab_button_bg_unfocused";
		} else if (model._selected) {
			bg_color_name = "tab_widget_tab_button_bg_selected";
		} else if (model._hover) {
			bg_color_name = "tab_widget_tab_button_bg_hovered";
		}
		me._bg.set("fill", me._style.getColor(bg_color_name));
		
		me._selected_indicator.setVisible(model._selected or model._hover);
		var selected_indicator_color_name = "tab_widget_tab_button_selected_indicator_selected";
		if (!model._selected and model._hover) {
			selected_indicator_color_name = "tab_widget_tab_button_selected_indicator_unselected_hovered";
		}
		me._selected_indicator.set("stroke", me._style.getColor(selected_indicator_color_name));

		me._label.set("fill", me._style.getColor((backdrop ? "backdrop_" : "") ~ "fg_color"));
	}
};

# A horizontal or vertical rule line
# possibly with a text label embedded
DefaultStyle.widgets.rule = {
  new: func(parent, cfg)
  {
    me._root = parent.createChild("group", "rule");
    var bgColor = me._style.getColor("fg_color");
    var shadowColor = me._style.getColor("fg_color_shadow");

    me._bg = me._root.createChild("path")
						.set("fill", bgColor)
						.set("stroke", bgColor)
						.set("stroke-width", 1);
    me._shadow = me._root.createChild("path")
						.set("fill", shadowColor)
						.set("stroke", shadowColor)
						.set("stroke-width", 1);

    me._isVertical = cfg.get("isVertical");
  },
  setSize: func(model, w, h)
  {
    var firstWidth = w;
    var firstHeight = h;
    var hh = h * 0.5;
    
    if( me['_text'] != nil )
    {
      firstHeight = firstWidth = 20; # TODO make this settable in Style.xml
      
      # TODO handle eliding for translations?
      me._text.setTranslation(firstWidth + 3, hh);
      var maxW = model._cfg.get("maxTextWidth", -1);
      if (maxW > 0) {
         me._text.set("max-width", maxW);
      }

      # assume horizontal for now, with a label
      var bg2Left = maxW > 0 ? maxW : me._text.maxWidth() + 22;
      var bg2Width = w - bg2Left;
      me._bg2.reset().rect(bg2Left, hh - 1, bg2Width, 2);
      me._shadow2.reset().moveTo(bg2Left + 1, hh).horiz(bg2Width - 1);
    }

    if (me._isVertical ) {
      me._bg.reset().rect(0, 0, 2, firstHeight);
      me._shadow.reset().moveTo(1, 1).vert(firstHeight - 1);
    } else {
      me._bg.reset().rect(0, hh - 1, firstWidth, 2);
      me._shadow.reset().moveTo(1, hh).horiz(firstWidth - 1);
    }

    return me;
  },
  setText: func(model, text)
  {
    if( text == nil or size(text) == 0 )
    {
      # force a resize?
      me._deleteElement('bg2');
      me._deleteElement('shadow2');
      return me._deleteElement('text');
    }

    if (me._isVertical) {
      logprint(LOG_DEVALERT, "Text label not supported for vertical rules, yet");
      return;
    }

    me._createElement("text", "text")
      .setText(text);

    var width_hint =  me._text.maxWidth() + 40;


    var bgColor = me._style.getColor("fg_color");
    var shadowColor = me._style.getColor("fg_color_shadow");

    me._bg2 = me._root.createChild("path")
						.set("fill", bgColor)
						.set("stroke", bgColor)
						.set("stroke-width", 1);
    me._shadow2 = me._root.createChild("path")
						.set("fill", shadowColor)
						.set("stroke", shadowColor)
						.set("stroke-width", 1);

    model.setLayoutMinimumSize([40, 14]);
    # TODO mark as expanding?
    model.setLayoutSizeHint([width_hint, 24]);

    return me.update(model);
  },
  update: func(model)
  {

    # different color if disabled?
    if( me['_text'] != nil )
    {
      var color_name = model._windowFocus() ? "fg_color" : "backdrop_fg_color";
      me._text.set("fill", me._style.getColor(color_name));
    }
  },
# protected:
  _createElement: func(name, type)
  {
    var mem = '_' ~ name;
    if( me[ mem ] == nil )
    {
      me[ mem ] = me._root.createChild(type, "rule-" ~ name);

      if( type == "text" )
      {
         me[ mem ].set("font", "LiberationFonts/LiberationSans-Regular.ttf")
                  .set("character-size", 14)
                  .set("alignment", "left-center");
      }
    }
    return me[ mem ];
  },
  _deleteElement: func(name)
  {
    name = '_' ~ name;
    if( me[ name ] != nil )
    {
      me[ name ].del();
      me[ name ] = nil;
    }
    return me;
  }
};

# a frame (sometimes called a group box), with optional label
# and enable/disable checkbox
DefaultStyle.widgets.frame = {
  new: func(parent, cfg)
  {
    me._root = parent.createChild("group", "frame-box");
    me._createElement("bg", "image")
       .set("slice", "8 8");
    me.content = me._root.createChild("group", "frame-content");

    # handle label + checkable flag
  },

  update: func(model)
  {
    var file = me._style._dir_widgets ~ "/";
    file ~= "frame";

#    if( !model._enabled )
 #     file ~= "-disabled";

    me._bg.set("src", file ~ ".png");
    
    me._bg.setSize(model._size[0], model._size[1]);
  },
  # protected:
  _createElement: func(name, type)
  {
    var mem = '_' ~ name;
    if( me[ mem ] == nil )
    {
      me[ mem ] = me._root.createChild(type, "frame-" ~ name);

      if( type == "text" )
      {
         me[ mem ].set("font", "LiberationFonts/LiberationSans-Regular.ttf")
                  .set("character-size", 14)
                  .set("alignment", "left-center");
      }
    }
    return me[ mem ];
  },
  _deleteElement: func(name)
  {
    name = '_' ~ name;
    if( me[ name ] != nil )
    {
      me[ name ].del();
      me[ name ] = nil;
    }
    return me;
  }

};

# 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", "2 6");

    me._createElement("fill", "image")
       .set("slice", "2 6");

    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 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 ~= "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 ~= "slider-" ~ direction;  
    if( !model._enabled ) {
      file ~= "-disabled";
    } else {
      if (model._down)
        file ~= "-focused";
      if (model._hover)
        file ~= "-hover";
    }

    me._thumb.set("src", file ~ ".png");
    
  # 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) {
      # update tick marks
      if (numTicks == 0) {
        me._ticks = 0;
        me._deleteElement('ticksPath');
      } else {
        me._createElement('ticksPath', 'path');
        me._ticks = numTicks;
        
        # set style
        # loop adding ticks

      }
    }
  },

   # protected:
  _createElement: func(name, type)
  {
    var mem = '_' ~ name;
    if( me[ mem ] == nil )
    {
      me[ mem ] = me._root.createChild(type, "slider-" ~ name);

      if( type == "text" )
      {
         me[ mem ].set("font", "LiberationFonts/LiberationSans-Regular.ttf")
                  .set("character-size", 14)
                  .set("alignment", "left-center");
      }
    }
    return me[ mem ];
  },
  _deleteElement: func(name)
  {
    name = '_' ~ name;
    if( me[ name ] != nil )
    {
      me[ name ].del();
      me[ name ] = nil;
    }
    return me;
  }
};

DefaultStyle.widgets["menu-item"] = {
	new: func(parent, cfg) {
		me._root = parent.createChild("group", "menu-item");
		me._bg = me._root.createChild("path");
		
		me._icon = me._root.createChild("image")
						.set("slice", "18 18");
		
		me._label = me._root.createChild("text")
						.set("font", "LiberationFonts/LiberationSans-Regular.ttf")
						.set("character-size", 14)
						.set("alignment", "left-baseline");
		
		me._shortcut = me._root.createChild("text")
						.set("font", "LiberationFonts/LiberationSans-Regular.ttf")
						.set("character-size", 14)
						.set("alignment", "right-baseline");
		
		me._submenu_indicator = me._root.createChild("path")
						.vert(12).line(6, -7).close();
	},
	
	setSize: func(model, w, h) {
		me._bg.reset().rect(0, 0, w, h);
		var offset = 0;
		if (!model._is_menubar_item) {
			offset += 5 + 18;
		}
		me._icon.setTranslation(5, int((h - 12) / 2));
		me._label.setTranslation(offset + 5, int(h / 2) + 4);
		me._shortcut.setTranslation(w - 5, int(h / 2) + 4);
		me._submenu_indicator.setTranslation(w - 12, int((h - 12) / 2));
		return me;
	},
	
	_updateLayoutSizes: func(model) {
		var min_width = 5 + me._label.maxWidth() + 5;
		if (!model._is_menubar_item) {
			# add icon space
			min_width += 5 + 18;
			# add shortcut space
			min_width += me._shortcut.maxWidth() + 10;
			if (model._menu != nil) {
				# add submenu indicator space
				min_width += 12;
			}
		}
		model.setLayoutMinimumSize([min_width, 24]);
		model.setLayoutSizeHint([min_width, 24]);
		
		return me;
	},
	
	setText: func(model, text) {
		me._label.setText(text);
		return me._updateLayoutSizes(model);
	},
	
	setShortcut: func(model, shortcut) {
    if (shortcut != nil) {
  		me._shortcut.setText(shortcut.repr());
    }
		return me._updateLayoutSizes(model);
	},
	
	setIcon: func(model, icon) {
		if (!icon) {
			me._icon.hide();
		} else {
			me._icon.show();
			var file = me._style._dir_widgets ~ "/" ~ icon;
			me._icon.set("src", file);
		}
		return me;
	},
	
	update: func(model) {
		me._bg.set("fill", me._style.getColor("menu_item_bg" ~ (model._hovered ? "_hovered" : "")));
		var text_color_name = "menu_item_fg";
		if (model._hovered) {
			text_color_name ~= "_hovered";
		} else if (!model._enabled) {
			text_color_name ~= "_disabled";
		}
		me._label.set("fill", me._style.getColor(text_color_name));
		me._shortcut.set("fill", me._style.getColor(text_color_name));
		me._submenu_indicator.set("fill", me._style.getColor("menu_item_submenu_indicator" ~ (model._hovered ? "_hovered" : "")));
		if (model._menu != nil) {
			if (!model._is_menubar_item) {
				me._submenu_indicator.show();
			}
			me._shortcut.hide();
		} else {
			me._submenu_indicator.hide();
			me._shortcut.show();
		}
		
		return me;
	}
};

DefaultStyle.widgets["menu-bar"] = {
	new: func(parent, cfg) {
		me._root = parent.createChild("group", "menu-bar");
		me._bg = me._root.createChild("path");
		me._items = me._root.createChild("group", "menu-bar-items");
	},
	
	setSize: func(model, w, h) {
		me._bg.reset().rect(0, 0, w, 24);
		me._items.setTranslation(0, 0);
		return me;
	},
	
	update: func(model) {
		me._bg.set("fill", me._style.getColor("bg_color"));
		
		return me;
	}
};

# A combo-box
DefaultStyle.widgets["combo-box"] = {
  new: func(parent, cfg)
  {
    me._root = parent.createChild("group", "combo-box");
    me._bg =
      me._root.createChild("path");
    me._border =
      me._root.createChild("image", "border")
              .set("slice", "10 6"); #"7")
    me._buttonBorder =
      me._root.createChild("image", "border-button")
              .set("slice", "10 6"); #"7")
    me._arrowIcon = me._root.createChild("image", "arrow");
    me._label =
      me._root.createChild("text")
              .set("font", "LiberationFonts/LiberationSans-Regular.ttf")
              .set("character-size", 14)
              .set("alignment", "left-center");
  },
  setSize: func(model, w, h)
  {
    var halfWidth = int(w * 0.5);
    me._bg.reset()
          .rect(3, 3, w - 6, h - 6, {"border-radius": 5});

    # we split the two pieces
    me._border.setSize(halfWidth, h);
    me._buttonBorder.setTranslation(halfWidth, 0);
    me._buttonBorder.setSize(w - halfWidth, h);

    var arrowSize = me._arrowIcon.imageSize();
    me._arrowIcon.setTranslation(w - (arrowSize[0] + 20), (h - arrowSize[1]) * 0.5);

    me._label.setTranslation(20, h * 0.5);
  },
  setText: func(model, text)
  {
    me._label.setText(text);

    var min_width = math.max(80, me._label.maxWidth() + 16 + me._arrowIcon.imageSize()[0]);
    model.setLayoutMinimumSize([min_width, 16]);
    model.setLayoutSizeHint([min_width, 28]);

    return me;
  },
  update: func(model)
  {
    var backdrop = !model._windowFocus();
    var (w, h) = model._size;
    var file = me._style._dir_widgets ~ "/";

    # TODO unify color names with image names
    var bg_color_name = "button_bg_color";
    if( backdrop )
      bg_color_name = "button_backdrop_bg_color";
    else if( !model._enabled )
      bg_color_name = "button_bg_color_insensitive";
    else if( model._down )
      bg_color_name = "button_bg_color_down";
    else if( model._hover )
      bg_color_name = "button_bg_color_hover";
    me._bg.set("fill", me._style.getColor(bg_color_name));

    var arrowIconFile = file ~ "combobox-arrow";

    if( backdrop )
    {
      file ~= "backdrop-";
      me._label.set("fill", me._style.getColor("backdrop_fg_color"));
    }
    else
      me._label.set("fill", me._style.getColor("fg_color"));
    file ~= "combobox";

    var buttonFile = file ~ "-button";
    file ~= "-entry";

    var suffix = "";
    if( model._down )
    { # no pressed image for the left half
      buttonFile ~= "-pressed";
    }

    if( model._enabled ) {
      if( model._focused and !backdrop )
        suffix ~= "-focused";
    } else {
      suffix ~= "-disabled";
      arrowIconFile ~= "-disabled";
    }

    me._border.set("src", file ~ suffix ~ ".png");
    me._buttonBorder.set("src", buttonFile ~ suffix ~ ".png");
    me._arrowIcon.set("src", arrowIconFile ~ ".png");
  }
};

DefaultStyle.widgets["list-item"] = {
	new: func(parent, cfg) {
		me._root = parent.createChild("group", "list-item");
		me._bg = me._root.createChild("path");
		
		me._label = me._root.createChild("text")
						.set("font", "LiberationFonts/LiberationSans-Regular.ttf")
						.set("character-size", 14)
						.set("alignment", "left-baseline");
	},
	
	setSize: func(model, w, h) {
		me._bg.reset().rect(0, 0, w, 24);
		me._label.setTranslation(5, int(h / 2) + 4);
		return me;
	},
	
	_updateLayoutSizes: func(model) {
		var min_width = 5 + me._label.maxWidth() + 5;
		model.setLayoutMinimumSize([min_width, 24]);
		model.setLayoutSizeHint([min_width, 24]);
		
		return me;
	},
	
	setText: func(model, text) {
		me._label.setText(text);
		return me._updateLayoutSizes(model);
	},
	
	update: func(model) {
		me._bg.set("fill", me._style.getColor("list_item_bg" ~ (model._selected ? "_selected" : "")));
		var text_color_name = "list_item_fg";
		if (model._selected) {
			text_color_name ~= "_selected";
		}
		me._label.set("fill", me._style.getColor(text_color_name));
		
		return me;
	}
};

DefaultStyle.widgets.list = {
	new: func(parent, cfg) {
		me._root = parent.createChild("group", "list");
		me._bg = me._root.createChild("path");
	},
	
	setSize: func(model, w, h) {
		me._bg.reset().rect(0, 0, w, h);
		return me;
	},
	
	update: func(model) {
		me._bg.set("fill", me._style.getColor("bg_color"));
		
		return me;
	}
};