From 486842239c71e7964f38a09aacda4970f2a82e1a Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 7 Feb 2012 10:58:14 -0800
Subject: Updated tools and PI to get/set materials by binding to appModel's
 materials property.  This requires us to add FlatMaterial to the list of
 materials in the MaterialsLibrary.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/components/combobox.reel/combobox.js            | 22 ++++++++-
 .../fill-properties.reel/fill-properties.html      | 11 ++++-
 .../fill-properties.reel/fill-properties.js        |  6 ++-
 .../ink-bottle-properties.html                     | 12 ++++-
 .../ink-bottle-properties.js                       |  6 ++-
 .../line-properties.reel/line-properties.js        | 14 ++++--
 .../oval-properties.reel/oval-properties.js        | 14 ++++--
 .../rect-properties.reel/rect-properties.js        | 14 ++++--
 .../shape-properties.reel/shape-properties.css     |  6 +--
 .../shape-properties.reel/shape-properties.html    | 35 +++++++++-----
 .../shape-properties.reel/shape-properties.js      | 53 +++++++++++++---------
 11 files changed, 137 insertions(+), 56 deletions(-)

(limited to 'js/components')

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() {
+//            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; }
     }
 
 
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js
index 1e717f88..b2de6ff7 100644
--- a/js/components/tools-properties/rect-properties.reel/rect-properties.js
+++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js
@@ -55,19 +55,25 @@ exports.RectProperties = 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; }
     },
 
     _setBindings: {
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.css b/js/components/tools-properties/shape-properties.reel/shape-properties.css
index 1e36b0bd..0441c1cf 100644
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.css
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css
@@ -2,8 +2,4 @@
  This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-
-#strokeIcon {
-    float: left;
-}
\ No newline at end of file
+ </copyright> */
\ No newline at end of file
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index 52502d47..64840b17 100644
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -53,6 +53,26 @@
                 }
             },
 
+            "_strokeMaterial1": {
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
+                "properties": {
+                    "element": {"#": "strokeMaterialCB"},
+                    "labelField": "_name",
+                    "dataField": "_name"
+                }
+            },
+
+            "_fillMaterial1": {
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
+                "properties": {
+                    "element": {"#": "fillMaterialCB"},
+                    "labelField": "_name",
+                    "dataField": "_name"
+                }
+            },
+
             "toolbutton1": {
                 "module": "js/components/layout/subtool-button.reel",
                 "name": "SubToolButton",
@@ -89,10 +109,9 @@
                 "name": "ShapeProperties",
                 "properties": {
                     "element": {"#": "shapeProperties"},
-                    "_strokeStyle": {"#": "strokeStyleCB"},
-                    "_strokeMaterial": {"#": "strokeMaterialCB"},
+                    "_strokeMaterial": {"@": "_strokeMaterial1"},
                     "_fillIcon": {"#": "fillIcon"},
-                    "_fillMaterial": {"#": "fillMaterialCB"},
+                    "_fillMaterial": {"@": "_fillMaterial1"},
 
                     "_useWebGL": {"#": "useWebGLCH"},
                     "_materialLabel": {"#": "materialLabel"},
@@ -125,14 +144,6 @@
             <label class="label">Stroke:</label>
             <div id="strokeControl" class="label"></div>
 
-            <label class="label">Style:</label>
-            <select id="strokeStyleCB" class="selectBox">
-                <option value="0">Hairline</option>
-                <option value="1" selected>Solid</option>
-                <option value="2">Dashed</option>
-                <option value="3">Dotted</option>
-            </select>
-
             <div id="customProperties">
                 <div id="ovalProperties" class="label"></div>
                 <div id="rectProperties" class="label"></div>
@@ -142,7 +153,7 @@
             <label class="label subOption optionLabel"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/>Use WebGL</label>
 
             <label id="materialLabel" class="label">Material:</label>
-            <div id="strokeIcon" class="pencilToolUp"></div>
+            <div id="strokeIcon" class="pencilToolUp" style="float: left;"></div>
 
             <select class="selectBox" id="strokeMaterialCB">
             </select>
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js
index b0d674cc..345e361c 100644
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.js
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js
@@ -16,8 +16,17 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
         value: function() {
             this.rectProperties.visible = true;
 
-            ShapesController.DisplayMaterials(this._strokeMaterial);
-            ShapesController.DisplayMaterials(this._fillMaterial);
+            Object.defineBinding(this._strokeMaterial, "items", {
+                boundObject: this.application.ninja.appModel,
+                boundObjectPropertyPath: "materials",
+                oneway: false
+            });
+
+            Object.defineBinding(this._fillMaterial, "items", {
+                boundObject: this.application.ninja.appModel,
+                boundObjectPropertyPath: "materials",
+                oneway: false
+            });
 
             this.handleChange(null);
             this._useWebGL.addEventListener("change", this, false);
@@ -36,13 +45,13 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
                 this._selectedSubTool = value;
                 this[this._selectedSubTool.properties].visible = true;
 
-                if(this._selectedSubTool.id === "LineTool") {
-                    this._fillIcon.style["display"] = "none";
-                    this._fillMaterial.style["display"] = "none";
-                } else {
-                    this._fillIcon.style["display"] = "";
-                    this._fillMaterial.style["display"] = "";
-                }
+//                if(this._selectedSubTool.id === "LineTool") {
+//                    this._fillIcon.style["display"] = "none";
+//                    this._fillMaterial.style["display"] = "none";
+//                } else {
+//                    this._fillIcon.style["display"] = "";
+//                    this._fillMaterial.style["display"] = "";
+//                }
                 
             }
         }
@@ -53,23 +62,23 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
             if(this._useWebGL.checked)
             {
                 this._use3D = true;
-                this._materialLabel.style["display"] = "";
-                this._strokeIcon.style["display"] = "";
-                this._strokeMaterial.style["display"] = "";
-                if(this.selectedSubTool.id !== "LineTool")
-                {
-                    this._fillIcon.style["display"] = "";
-                    this._fillMaterial.style["display"] = "";
-                }
+//                this._materialLabel.style["display"] = "";
+//                this._strokeIcon.style["display"] = "";
+//                this._strokeMaterial.style["display"] = "";
+//                if(this.selectedSubTool.id !== "LineTool")
+//                {
+//                    this._fillIcon.style["display"] = "";
+//                    this._fillMaterial.style["display"] = "";
+//                }
             }
             else
             {
                 this._use3D = false;
-                this._materialLabel.style["display"] = "none";
-                this._strokeIcon.style["display"] = "none";
-                this._strokeMaterial.style["display"] = "none";
-                this._fillIcon.style["display"] = "none";
-                this._fillMaterial.style["display"] = "none";
+//                this._materialLabel.style["display"] = "none";
+//                this._strokeIcon.style["display"] = "none";
+//                this._strokeMaterial.style["display"] = "none";
+//                this._fillIcon.style["display"] = "none";
+//                this._fillMaterial.style["display"] = "none";
             }
         }
     }
-- 
cgit v1.2.3