Adding UIInlineSelect + data bindings for Vector3, Color, Quaternion

Data/AtomicEditor/Resources/EditorData/AtomicEditor/typescript/AtomicWork.d.ts

@@ -15,8 +15,8 @@ declare module Atomic {
     /*
         export enum UIWidgetEventType {
 
-            EVENT_TYPE_CLICK,
-            EVENT_TYPE_LONG_CLICK,
+        EVENT_TYPE_CLICK,
+        EVENT_TYPE_LONG_CLICK,
         EVENT_TYPE_POINTER_DOWN,
         EVENT_TYPE_POINTER_UP,
         EVENT_TYPE_POINTER_MOVE,
@@ -50,6 +50,16 @@ declare module Atomic {
         touch: boolean;
     }
 
+    export interface AttributeInfo {
+
+      type:VariantType;
+      name:string;
+      mode:number; // AM_*
+      defaultValue:string;
+      enumNames:string[];
+
+    }
+
     export function getArguments(): Array<string>;
     export function getEngine(): Engine;
     export function getInput(): Input;

Data/AtomicEditor/Resources/EditorData/AtomicEditor/typescript/ui/inspector/NodeInspector.ts

@@ -1,84 +1,174 @@
 
 import ScriptWidget = require("../ScriptWidget");
 
-var UI = Atomic.UI;
+class DataBinding {
 
-class NodeInspector extends ScriptWidget {
+    constructor(object: Atomic.Serializable, attrInfo: Atomic.AttributeInfo, widget: Atomic.UIWidget) {
 
-  constructor() {
+        this.object = object;
+        this.attrInfo = attrInfo;
+        this.widget = widget;
 
-    super();
+    }
 
-  }
+    static createBinding(object: Atomic.Serializable, attrInfo: Atomic.AttributeInfo): DataBinding {
 
-  inspect(node:Atomic.Node) {
+        var widget: Atomic.UIWidget = null;
 
-    var fd = new Atomic.UIFontDescription();
-    fd.id = "Vera";
-    fd.size = 11;
+        var fd = new Atomic.UIFontDescription();
+        fd.id = "Vera";
+        fd.size = 11;
 
-    var nlp = new Atomic.UILayoutParams();
-    nlp.width = 304;
+        if (attrInfo.type == Atomic.VAR_BOOL) {
 
-    var nodeLayout = new Atomic.UILayout();
-    nodeLayout.spacing = 4;
+            var box = new Atomic.UICheckBox();
+            box.skinBg = "TBGreyCheckBox";
+            widget = box;
 
-    nodeLayout.layoutDistribution  = Atomic.UI_LAYOUT_DISTRIBUTION_GRAVITY;
-    nodeLayout.layoutPosition = Atomic.UI_LAYOUT_POSITION_LEFT_TOP;
-    nodeLayout.layoutParams = nlp;
+        } else if (attrInfo.type == Atomic.VAR_STRING) {
 
-    // node attr layout
+            var field = new Atomic.UIEditField();
+            field.textAlign = Atomic.UI_TEXT_ALIGN_LEFT;
+            field.skinBg = "TBAttrEditorField";;
+            field.fontDescription = fd;
+            var lp = new Atomic.UILayoutParams();
+            lp.width = 140;
+            field.layoutParams = lp;
 
-    var nodeSection = new Atomic.UISection();
-    nodeSection.text = "Node";
-    nodeSection.value = 1;
-    //nodeSection.textAlign = Atomic.UI_TEXT_ALIGN_LEFT;
-    //nodeSection.skinBg = "InspectorTextLabel";
-    nodeLayout.addChild(nodeSection);
+            widget = field;
+        }
+        else if (attrInfo.type == Atomic.VAR_VECTOR3 || attrInfo.type == Atomic.VAR_QUATERNION)
+        {
+            var layout = new Atomic.UILayout();
+            widget = layout;
+            layout.spacing = 0;
 
-    var attrsVerticalLayout = new Atomic.UILayout(Atomic.UI_AXIS_Y);
-    attrsVerticalLayout.spacing = 3;
-    attrsVerticalLayout.layoutPosition = Atomic.UI_LAYOUT_POSITION_LEFT_TOP;
-    attrsVerticalLayout.layoutSize = Atomic.UI_LAYOUT_SIZE_AVAILABLE;
+            var lp = new Atomic.UILayoutParams();
+            lp.width = 100;
 
-    nodeSection.contentRoot.addChild(attrsVerticalLayout);
+            for (var i = 0; i < 3; i++)
+            {
+                var select = new Atomic.UIInlineSelect();
+                select.id = String(i + 1);
+                select.fontDescription = fd;
+                select.skinBg = "InspectorTextAttrName";
+                select.setLimits(-10000000, 10000000);
+                var editlp = new Atomic.UILayoutParams();
+                editlp.minWidth = 60;
+                select.editFieldLayoutParams = editlp;
+                select.layoutParams = lp;
+                layout.addChild(select);
+            }
 
-    var attrs = node.getAttributes();
+        }
 
-    for (var i in attrs) {
 
-      var attr = attrs[i];
 
-      if (attr.mode & Atomic.AM_NOEDIT)
-        continue;
+        if (widget) {
 
-      var attrLayout = new Atomic.UILayout();
+            var binding = new DataBinding(object, attrInfo, widget);
+            return binding;
 
-      attrLayout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION_GRAVITY;
+        }
 
-      var name = new Atomic.UITextField();
-      name.textAlign = Atomic.UI_TEXT_ALIGN_LEFT;
-      name.skinBg = "InspectorTextAttrName";
+        return null;
 
-      var bname = attr.name;
-      if (bname == "Is Enabled")
-          bname = "Enabled";
+    }
 
-      name.text = bname;
-      name.fontDescription = fd;
+    object: Atomic.Serializable;
+    attrInfo: Atomic.AttributeInfo;
+    widget: Atomic.UIWidget;
 
-      attrLayout.addChild(name);
+}
 
-      //TBWidget* bwidget = binding->GetWidget();
-      //attrLayout->AddChild(bwidget);
+class NodeInspector extends ScriptWidget {
 
-      attrsVerticalLayout.addChild(attrLayout);
+    constructor() {
+
+        super();
 
     }
 
-    this.addChild(nodeLayout);
+    inspect(node: Atomic.Node) {
+
+        var fd = new Atomic.UIFontDescription();
+        fd.id = "Vera";
+        fd.size = 11;
+
+        var nlp = new Atomic.UILayoutParams();
+        nlp.width = 304;
+
+        var nodeLayout = new Atomic.UILayout();
+        nodeLayout.spacing = 4;
+
+        nodeLayout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION_GRAVITY;
+        nodeLayout.layoutPosition = Atomic.UI_LAYOUT_POSITION_LEFT_TOP;
+        nodeLayout.layoutParams = nlp;
+
+        // node attr layout
+
+        var nodeSection = new Atomic.UISection();
+        nodeSection.text = "Node";
+        nodeSection.value = 1;
+        //nodeSection.textAlign = Atomic.UI_TEXT_ALIGN_LEFT;
+        //nodeSection.skinBg = "InspectorTextLabel";
+        nodeLayout.addChild(nodeSection);
+
+        var attrsVerticalLayout = new Atomic.UILayout(Atomic.UI_AXIS_Y);
+        attrsVerticalLayout.spacing = 3;
+        attrsVerticalLayout.layoutPosition = Atomic.UI_LAYOUT_POSITION_LEFT_TOP;
+        attrsVerticalLayout.layoutSize = Atomic.UI_LAYOUT_SIZE_AVAILABLE;
+
+        nodeSection.contentRoot.addChild(attrsVerticalLayout);
+
+        var attrs = node.getAttributes();
+
+        for (var i in attrs) {
+
+            var attr = <Atomic.AttributeInfo> attrs[i];
 
-  }
+            if (attr.mode & Atomic.AM_NOEDIT)
+                continue;
+
+            var binding = DataBinding.createBinding(node, attr);
+
+            if (!binding)
+                continue;
+
+            var attrLayout = new Atomic.UILayout();
+
+            attrLayout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION_GRAVITY;
+
+            var name = new Atomic.UITextField();
+            name.textAlign = Atomic.UI_TEXT_ALIGN_LEFT;
+            name.skinBg = "InspectorTextAttrName";
+
+            if (attr.type == Atomic.VAR_VECTOR3 || attr.type == Atomic.VAR_COLOR ||
+                attr.type == Atomic.VAR_QUATERNION) {
+                attrLayout.axis = Atomic.UI_AXIS_Y;
+                attrLayout.layoutPosition = Atomic.UI_LAYOUT_POSITION_LEFT_TOP;
+                attrLayout.skinBg = "InspectorVectorAttrLayout";
+            }
+
+
+            var bname = attr.name;
+            if (bname == "Is Enabled")
+                bname = "Enabled";
+
+            name.text = bname;
+            name.fontDescription = fd;
+
+            attrLayout.addChild(name);
+
+            attrLayout.addChild(binding.widget);
+
+            attrsVerticalLayout.addChild(attrLayout);
+
+        }
+
+        this.addChild(nodeLayout);
+
+    }
 
 
 }

Source/Atomic/UI/UI.cpp

@@ -11,6 +11,7 @@
 #include <TurboBadger/tb_message_window.h>
 #include <TurboBadger/tb_editfield.h>
 #include <TurboBadger/tb_select.h>
+#include <TurboBadger/tb_inline_select.h>
 #include <TurboBadger/tb_tab_container.h>
 #include <TurboBadger/tb_toggle_container.h>
 #include <TurboBadger/image/tb_image_widget.h>
@@ -48,6 +49,7 @@ using namespace tb;
 #include "UIDragDrop.h"
 #include "UIContainer.h"
 #include "UISection.h"
+#include "UIInlineSelect.h"
 
 namespace tb
 {
@@ -466,6 +468,14 @@ UIWidget* UI::WrapWidget(tb::TBWidget* widget)
 
     // this is order dependent as we're using IsOfType which also works if a base class
 
+    if (widget->IsOfType<TBInlineSelect>())
+    {
+        UIInlineSelect* select = new UIInlineSelect(context_, false);
+        select->SetWidget(widget);
+        widgetWrap_[widget] = select;
+        return select;
+    }
+
     if (widget->IsOfType<TBSection>())
     {
         UISection* section = new UISection(context_, false);

Source/Atomic/UI/UIInlineSelect.cpp

@@ -0,0 +1,55 @@
+
+#include <TurboBadger/tb_widgets.h>
+#include <TurboBadger/tb_widgets_common.h>
+#include <TurboBadger/tb_inline_select.h>
+
+#include <Atomic/IO/Log.h>
+
+#include "UIEvents.h"
+#include "UI.h"
+#include "UILayout.h"
+#include "UIInlineSelect.h"
+
+using namespace tb;
+
+namespace Atomic
+{
+
+UIInlineSelect::UIInlineSelect(Context* context, bool createWidget) : UIWidget(context, false)
+{
+    if (createWidget)
+    {
+        widget_ = new TBInlineSelect();
+        widget_->SetDelegate(this);
+        GetSubsystem<UI>()->WrapWidget(this, widget_);
+    }
+}
+
+UIInlineSelect::~UIInlineSelect()
+{
+
+}
+
+void UIInlineSelect::SetEditFieldLayoutParams(UILayoutParams* params)
+{
+    if (!params || !widget_)
+        return;
+
+    ((TBInlineSelect*) widget_)->SetEditFieldLayoutParams(*(params->GetTBLayoutParams()));
+
+}
+
+void UIInlineSelect::SetLimits(double minimum, double maximum)
+{
+    if (!widget_)
+        return;
+    ((TBInlineSelect*) widget_)->SetLimits(minimum, maximum);
+
+}
+
+bool UIInlineSelect::OnEvent(const tb::TBWidgetEvent &ev)
+{
+    return UIWidget::OnEvent(ev);
+}
+
+}

Source/Atomic/UI/UIInlineSelect.h

@@ -0,0 +1,31 @@
+
+#pragma once
+
+#include "UIWidget.h"
+
+namespace Atomic
+{
+
+
+class UIInlineSelect : public UIWidget
+{
+    OBJECT(UIInlineSelect)
+
+public:
+
+    UIInlineSelect(Context* context, bool createWidget = true);
+    virtual ~UIInlineSelect();
+
+    void SetLimits(double minimum, double maximum);
+
+    void SetEditFieldLayoutParams(UILayoutParams* params);
+
+protected:
+
+    virtual bool OnEvent(const tb::TBWidgetEvent &ev);
+
+private:
+
+};
+
+}

Source/Atomic/UI/UILayout.h

@@ -84,6 +84,12 @@ public:
     void SetWidth(int width) { params_.SetWidth(width); }
     void SetHeight(int height) { params_.SetHeight(height); }
 
+    void SetMinWidth(int width) { params_.min_w = width; }
+    void SetMinHeight(int height) { params_.min_h = height; }
+
+    void SetMaxWidth(int width) { params_.max_w = width; }
+    void SetMaxHeight(int height) { params_.max_h = height; }
+
     tb::LayoutParams* GetTBLayoutParams() { return &params_; }
 
 private:
@@ -106,7 +112,6 @@ public:
 
     void SetAxis(UI_AXIS axis);
     void SetLayoutSize(UI_LAYOUT_SIZE size);
-
     void SetLayoutPosition(UI_LAYOUT_POSITION position);
     void SetLayoutDistribution(UI_LAYOUT_DISTRIBUTION distribution);
     void SetLayoutDistributionPosition(UI_LAYOUT_DISTRIBUTION_POSITION distribution_pos);

Source/AtomicJS/Javascript/JSUI.cpp

@@ -54,6 +54,7 @@ JSUI::JSUI(Context* context) : Object(context),
     uiTypes_["UISceneView"] = true;
     uiTypes_["UIContainer"] = true;
     uiTypes_["UISection"] = true;
+    uiTypes_["UIInlineSelect"] = true;
 
 }
 

Source/AtomicJS/Packages/Atomic/UI.json

@@ -8,7 +8,7 @@
 								"UIImageWidget", "UIClickLabel", "UICheckBox", "UIMenuItem", "UIMenuItemSource",
 								"UISelectList", "UIListView", "UIMessageWindow", "UILayoutParams", "UIFontDescription",
 								"UISkinImage", "UITabContainer", "UISceneView", "UIPreferredSize", "UIDragObject",
-								"UIContainer", "UISection"],
+								"UIContainer", "UISection", "UIInlineSelect"],
 	"overloads" : {
 	}
 }