11 files changed, 137 insertions, 56 deletions

diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js
index deef2a47..8906a649 100644
--- a/js/components/combobox.reel/combobox.js
+++ b/js/components/combobox.reel/combobox.js
@@ -27,6 +27,14 @@ exports.Combobox = Montage.create(Component, {
         value: null
     },
 
+    dataField: {
+        value: null
+    },
+
+    dataFunction: {
+        value: null
+    },
+
     _items: {
         value: []
     },
@@ -122,7 +130,19 @@ exports.Combobox = Montage.create(Component, {
                 {
                     var current = items[i];
                     optionItem = document.createElement("option");
-                    optionItem.value = current;
+                    if(this.dataFunction)
+                    {
+                        optionItem.value = this.dataFunction(current);
+                    }
+                    else if(this.dataField)
+                    {
+                        optionItem.value = current[this.dataField];
+                    }
+                    else
+                    {
+                        optionItem.value = current;
+                    }
+
                     if(this.labelFunction)
                     {
                         optionItem.innerText = this.labelFunction(current);
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html
index d09b7f44..a35f9b15 100644
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -11,6 +11,15 @@
 
         <script type="text/montage-serialization">
         {
+            "_fillMaterialCB": {
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
+                "properties": {
+                    "element": {"#": "fillMaterialCB"},
+                    "labelField": "_name",
+                    "dataField": "_name"
+                }
+            },
             "owner": {
                 "module": "js/components/tools-properties/fill-properties.reel",
                 "name": "FillProperties",
@@ -18,7 +27,7 @@
                     "element": {"#": "fillProperties"},
                     "_useWebGL": {"#": "useWebGLCH"},
                     "_materialsContainer": {"#": "materialsContainer"},
-                    "_fillMaterial": {"#": "fillMaterialCB"}
+                    "_fillMaterial": {"@": "_fillMaterialCB"}
                 }
             }
         }
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.js b/js/components/tools-properties/fill-properties.reel/fill-properties.js
index 3b77d72e..61b667d7 100644
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.js
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.js
@@ -14,7 +14,11 @@ exports.FillProperties = Montage.create(ToolProperties, {
     
     _subPrepare: {
         value: function() {
-            ShapesController.DisplayMaterials(this._fillMaterial);
+            Object.defineBinding(this._fillMaterial, "items", {
+                boundObject: this.application.ninja.appModel,
+                boundObjectPropertyPath: "materials",
+                oneway: false
+            });
 
             this.handleChange(null);
             this._useWebGL.addEventListener("change", this, false);
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
index b98a7b4c..1602e793 100644
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
@@ -36,6 +36,16 @@
                 }
             },
 
+            "_strokeMaterialCB": {
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
+                "properties": {
+                    "element": {"#": "strokeMaterialIBCB"},
+                    "labelField": "_name",
+                    "dataField": "_name"
+                }
+            },
+
             "owner": {
                 "module": "js/components/tools-properties/ink-bottle-properties.reel",
                 "name": "InkBottleProperties",
@@ -49,7 +59,7 @@
 
                     "_useWebGL": {"#": "useWebGLCHIB"},
                     "_materialsContainer": {"#": "materialsContainerIB"},
-                    "_strokeMaterial": {"#": "strokeMaterialIBCB"}
+                    "_strokeMaterial": {"@": "_strokeMaterialCB"}
                 }
             }
         }
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
index 61ea808a..e3ffc359 100644
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
@@ -14,7 +14,11 @@ exports.InkBottleProperties = Montage.create(ToolProperties, {
 
     _subPrepare: {
         value: function() {
-            ShapesController.DisplayMaterials(this._strokeMaterial);
+            Object.defineBinding(this._strokeMaterial, "items", {
+                boundObject: this.application.ninja.appModel,
+                boundObjectPropertyPath: "materials",
+                oneway: false
+            });
 
             this.handleChange(null);
             this._useWebGL.addEventListener("change", this, false);
diff --git a/js/components/tools-properties/line-properties.reel/line-properties.js b/js/components/tools-properties/line-properties.reel/line-properties.js
index 694e4326..e1ecf790 100644
--- a/js/components/tools-properties/line-properties.reel/line-properties.js
+++ b/js/components/tools-properties/line-properties.reel/line-properties.js
@@ -33,18 +33,24 @@ exports.LineProperties = Montage.create(ToolProperties, {
     },
 
     strokeStyle : {
-        get: function() { return this.base._strokeStyle.options[this.base._strokeStyle.value].text; }
+        get: function() {
+//            return this.base._strokeStyle.options[this.base._strokeStyle.value].text;
+            return "Solid";
+        }
     },
 
     strokeStyleIndex : {
-        get: function() { return this.base._strokeStyle.options[this.base._strokeStyle.value].value; }
+        get: function() {
+//            return this.base._strokeStyle.options[this.base._strokeStyle.value].value;
+            return 1;
+        }
     },
 
     strokeMaterial: {
-        get: function() { return this.base._strokeMaterial.options[this.base._strokeMaterial.value].value; }
+        get: function() { return this.base._strokeMaterial.value; }
     },
 
     fillMaterial: {
-        get: function() { return this.base._fillMaterial.options[this.base._fillMaterial.value].value; }
+        get: function() { return this.base._fillMaterial.value; }
     }
 });
\ No newline at end of file
diff --git a/js/components/tools-properties/oval-properties.reel/oval-properties.js b/js/components/tools-properties/oval-properties.reel/oval-properties.js
index c88f7799..ddeb64ee 100644
--- a/js/components/tools-properties/oval-properties.reel/oval-properties.js
+++ b/js/components/tools-properties/oval-properties.reel/oval-properties.js
@@ -33,19 +33,25 @@ exports.OvalProperties = Montage.create(ToolProperties, {
     },
     
     strokeStyle : {
-        get: function() { return this.base._strokeStyle.options[this.base._strokeStyle.value].text; }
+        get: function() {