accept selected = 0

lib/ControlKit.js

@@ -20,12 +20,16 @@ var Mouse   = require('./core/document/Mouse');
 
 var ValuePlotter = require('./component/ValuePlotter');
 var StringOutput = require('./component/StringOutput'),
-    NumberOutput = require('./component/NumberOutput');
+    StringInput = require('./component/StringInput'),
+    NumberOutput = require('./component/NumberOutput'),
+    Slider = require('./component/Slider'),
+    Select = require('./component/Select');
 
 var DEFAULT_HISTORY = false,
     DEFAULT_OPACITY = 1.0,
     DEFAULT_PANELS_CLOSABLE = false,
     DEFAULT_ENABLE = true,
+    DEFAULT_FULL = false,
     DEFAULT_LOAD_AND_SAVE = false;
 
 var DEFAULT_TRIGGER_SHORTCUT_CHAR = 'h';
@@ -52,6 +56,7 @@ function ControlKit(options) {
     options.panelsClosable   = options.panelsClosable === undefined ? DEFAULT_PANELS_CLOSABLE : options.panelsClosable;
     options.useExternalStyle = options.useExternalStyle === undefined ? false : options.useExternalStyle;
     options.enable           = options.enable === undefined ? DEFAULT_ENABLE : options.enable;
+    options.full             = options.full === undefined ? DEFAULT_FULL : options.full;
 
     EventDispatcher.apply(this, arguments);
 
@@ -76,13 +81,15 @@ function ControlKit(options) {
     }
 
     node.setProperty('id', CSS.ControlKit);
+    if (options.full) node.setStyleClass('full');
 
     this._node = node;
     this._panels = [];
     this._enabled = options.enable;
     this._historyEnabled = options.history;
     this._statesEnabled = options.loadAndSave;
     this._panelsClosable = options.panelsClosable;
+    this._full = options.full;
 
     var history = History.setup();
 
@@ -202,9 +209,53 @@ ControlKit.prototype.update = function () {
                 }
                 if (component instanceof ValuePlotter ||
                     component instanceof StringOutput ||
+                    component instanceof StringInput ||
                     component instanceof NumberOutput) {
                     component.update();
                 }
+                if (component instanceof Slider ||
+                    component instanceof Select) {
+                    component.onValueUpdate({ data: { origin: null }});
+                }
+            }
+        }
+    }
+};
+
+/**
+ * Return the first component found with a given key or label.
+ * @param {Object} [params] - Options
+ * @param {String} [params.label] - Label
+ * @param {String} [params.key] - Key
+  */
+ControlKit.prototype.getComponentBy = function (params) {
+    var i, j, k;
+    var l, m, n;
+    var panels = this._panels,
+        panel,
+        groups,
+        components,
+        component;
+
+    i = -1; l = panels.length;
+    while (++i < l) {
+        panel = panels[i];
+
+        groups = panel.getGroups();
+        j = -1; m = groups.length;
+
+        while (++j < m) {
+            components = groups[j].getComponents();
+            k = -1; n = components.length;
+
+            while (++k < n) {
+                component = components[k];
+                if (!component) continue;
+
+                if (component._key === params.key) return component;
+
+                if (!component._lablNode) continue;
+                if (component._lablNode._element.innerText === params.label) return component;
             }
         }
     }

lib/component/Canvas.js

@@ -6,15 +6,19 @@ var Event_     = require('../core/event/Event'),
     GroupEvent = require('../group/GroupEvent');
 
 function Canvas(parent,params) {
-    Component.apply(this,arguments);
+    params.label = params.label || '';
+
+    Component.apply(this,[parent,params.label]);
 
     var wrap = this._wrapNode;
         wrap.setStyleClass(CSS.CanvasWrap);
     var canvas = this._canvas = document.createElement('canvas');
         wrap.getElement().appendChild(canvas);
 
     var width = wrap.getWidth();
-    this._canvasWidth = this._canvasHeight = 0;
+    var height = params.height || width;
+    this._canvasWidth = width;
+    this._canvasHeight = height;
     this._setCanvasSize(width,width);
     this._updateHeight();
 
@@ -32,19 +36,21 @@ Canvas.prototype._updateHeight = function () {
     this._node.setHeight(canvasHeight + Metric.PADDING_WRAPPER);
 };
 
+Canvas.prototype._redraw = function(){};
+
 Canvas.prototype.onGroupSizeChange = function () {
     var width = this._wrapNode.getWidth();
 
-    this._setCanvasSize(width, width);
+    this._setCanvasSize(width);
     this._updateHeight();
     this._redraw();
 
     this.dispatchEvent(new Event_(this, GroupEvent.GROUP_SIZE_UPDATE, null));
 };
 
 Canvas.prototype._setCanvasSize = function (width, height) {
-    var canvasWidth = this._canvasWidth = width,
-        canvasHeight = this._canvasHeight = height;
+    var canvasWidth = width;
+    var canvasHeight = (height) ? height : this._canvasHeight;
 
     var canvas = this._canvas;
         canvas.style.width = canvasWidth + 'px';

lib/component/Options.js

@@ -134,7 +134,7 @@ Options.prototype = {
             rootPosY = (posY + listHeight) > windowHeight ? (posY - listHeight * 0.5 - elementHeight * 0.5) : posY;
 
         listNode.setWidth(width);
-        rootNode.setPositionGlobal(rootPosX, rootPosY);
+        rootNode.setPositionGlobal(rootPosX, rootPosY + 2);
 
         this._callbackOut = callbackOut;
         this._unfocusable = false;

lib/component/Select.js

@@ -47,7 +47,7 @@ function Select(parent, object, value, params) {
         select.setProperty('value', targetObj.toString().length > 0 ? targetObj : values[0]);
     }
     else {
-        select.setProperty('value', params.selected ? values[params.selected] : STR_CHOOSE);
+        select.setProperty('value', params.selected !== -1 ? values[params.selected] : STR_CHOOSE);
     }
 
     this._wrapNode.addChild(select);

lib/component/StringInput.js

@@ -136,4 +136,8 @@ StringInput.prototype._onInputDragStart = function () {
     document.addEventListener(eventUp, onDragFinish, false);
 };
 
+StringInput.prototype.update = function () {
+    this.onValueUpdate({ data: {} });
+};
+
 module.exports = StringInput;

lib/group/Panel.js

@@ -35,9 +35,9 @@ var DEFAULT_PANEL_POSITION = null,
     DEFAULT_PANEL_WIDTH      = 200,
     DEFAULT_PANEL_HEIGHT     = null,
     DEFAULT_PANEL_WIDTH_MIN  = 100,
-    DEFAULT_PANEL_WIDTH_MAX  = 600,
+    DEFAULT_PANEL_WIDTH_MAX  = 800,
     DEFAULT_PANEL_RATIO      = 40,
-    DEFAULT_PANEL_LABEL      = 'Control Panel',
+    DEFAULT_PANEL_LABEL      = 'Parameters (P)',
     DEFAULT_PANEL_VALIGN     = LayoutMode.TOP,
     DEFAULT_PANEL_ALIGN      = LayoutMode.RIGHT,
     DEFAULT_PANEL_DOCK       = {align:LayoutMode.RIGHT,resizable:true},
@@ -114,7 +114,7 @@ function Panel(controlKit,params){
     if (!dock) {
         var menuHide = this._menuHide = new Node(Node.INPUT_BUTTON);
             menuHide.setStyleClass(CSS.ButtonMenuHide);
-            menuHide.addEventListener(NodeEvent.MOUSE_DOWN, this._onMenuHideMouseDown.bind(this));
+            head.addEventListener(NodeEvent.MOUSE_DOWN, this._onMenuHideMouseDown.bind(this));
 
         menu.addChild(menuHide);
 
@@ -549,6 +549,25 @@ Panel.prototype.addGroup = function (params) {
     return this;
 };
 
+/**
+ * Removes a Group from the Panel.
+ * @param {Object} [group] - Group
+ * @returns {Panel}
+ */
+Panel.prototype.removeGroup = function (group) {
+    var index = this._groups.findIndex(function(element) { return element === group; });
+    if (index < 0) return this;
+
+    var list = this.getNode().getLastChild().getFirstChild();
+    var _group = this._groups.splice(index, 1)[0];
+    list.removeChild(_group._node);
+
+    if (this.isDocked()){
+        this.dispatchEvent(new Event_(this, PanelEvent.PANEL_SIZE_CHANGE));
+    }
+    return this;
+};
+
 /**
  * Adds a new SubGroup to the last added Group.
  * @param {Object} [params] - SubGroup options

lib/group/SubGroup.js

@@ -12,6 +12,7 @@ function SubGroup(parent,params){
     params            = params          || {};
     params.label      = params.label    || null;
     params.useLabels  = params.useLabels  === undefined ? true : params.useLabels;
+    params.enable     = params.enable     === undefined ? true : params.enable;
 
     AbstractGroup.apply(this,arguments);