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 +++++++++++++---------
 js/data/pi/pi-data.js                              |  2 +-
 js/helper-classes/RDGE/MaterialsLibrary.js         |  2 +
 js/models/shape-model.js                           |  2 -
 js/tools/LineTool.js                               |  7 ++-
 js/tools/OvalTool.js                               | 14 +++---
 js/tools/RectTool.js                               | 14 +++---
 17 files changed, 155 insertions(+), 79 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() {
+//            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";
             }
         }
     }
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 901ca37f..de192b57 100644
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -544,7 +544,7 @@ exports.PiData = Montage.create( Montage, {
                             id:   "strokeMaterial",
                             prop:   "strokeMaterial",
                             label: "Stroke",
-                            labelFunction: function(item) { return item.getName(); },
+                            labelField: "_name",
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
                             enabled: { boundObject: "this.controls", boundProperty: "useWebGl" },
                             divider : true
diff --git a/js/helper-classes/RDGE/MaterialsLibrary.js b/js/helper-classes/RDGE/MaterialsLibrary.js
index edc4f7da..9616b525 100644
--- a/js/helper-classes/RDGE/MaterialsLibrary.js
+++ b/js/helper-classes/RDGE/MaterialsLibrary.js
@@ -169,6 +169,7 @@ var MaterialsLibrary = Object.create(Object.prototype, {
 
 // create the library of stroke and fill materials
 
+var flatMaterial				= new FlatMaterial();
 var uberMaterial				= new UberMaterial();
 //var linearGradientMaterial		= new LinearGradientMaterial();
 //var radialGradientMaterial		= new RadialGradientMaterial();
@@ -182,6 +183,7 @@ var uberMaterial				= new UberMaterial();
 //var plasmaMaterial				= new PlasmaMaterial();
 var bumpMetalMaterial			= new BumpMetalMaterial();
 
+MaterialsLibrary.addMaterial(flatMaterial);
 //MaterialsLibrary.addMaterial(linearGradientMaterial);
 //MaterialsLibrary.addMaterial(radialGradientMaterial);
 //MaterialsLibrary.addMaterial(radialBlurMaterial);
diff --git a/js/models/shape-model.js b/js/models/shape-model.js
index 1175538f..58a88fd0 100644
--- a/js/models/shape-model.js
+++ b/js/models/shape-model.js
@@ -18,14 +18,12 @@ exports.ShapeModel = Montage.create(Component, {
     strokeSize:             { value: null },
     stroke:                 { value: null },
     strokeMaterial:         { value: null },
-    strokeMaterialIndex:    { value: null },
     strokeStyle:            { value: null },
     strokeStyleIndex:       { value: null },
     border:                 { value: null },    // Store css value for ColorController
 
     fill:                   { value: null },
     fillMaterial:           { value: null },
-    fillMaterialIndex:      { value: null },
     background:             { value: null },    // Store css value for ColorController
 
     // Line-specific
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index 6a948fd8..99c374a7 100644
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -203,10 +203,10 @@ exports.LineTool = Montage.create(ShapeTool, {
             // for default stroke and fill/no materials
             var strokeMaterial = null;
 
-            var strokeIndex = parseInt(this.options.strokeMaterial);
-            if(strokeIndex > 0)
+            var strokeM = this.options.strokeMaterial;
+            if(strokeM)
             {
-                strokeMaterial = Object.create(MaterialsLibrary.getMaterialAt(strokeIndex-1));
+                strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM));
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
@@ -232,7 +232,6 @@ exports.LineTool = Montage.create(ShapeTool, {
                 }
 
                 canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial;
-                canvas.elementModel.shapeModel.strokeMaterialIndex = strokeIndex;
 
                 canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex;
                 canvas.elementModel.shapeModel.strokeStyle = strokeStyle;
diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js
index 446c6754..14655312 100644
--- a/js/tools/OvalTool.js
+++ b/js/tools/OvalTool.js
@@ -43,16 +43,16 @@ exports.OvalTool = Montage.create(ShapeTool, {
             var strokeMaterial = null;
             var fillMaterial = null;
 
-            var strokeIndex = parseInt(this.options.strokeMaterial);
-            if(strokeIndex > 0)
+            var strokeM = this.options.strokeMaterial;
+            if(strokeM)
             {
-                strokeMaterial = Object.create(MaterialsLibrary.getMaterialAt(strokeIndex-1));
+                strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM));
             }
 
-            var fillIndex = parseInt(this.options.fillMaterial);
-            if(fillIndex > 0)
+            var fillM = this.options.fillMaterial;
+            if(fillM)
             {
-                fillMaterial = Object.create(MaterialsLibrary.getMaterialAt(fillIndex-1));
+                fillMaterial = Object.create(MaterialsLibrary.getMaterial(fillM));
             }
 
 
@@ -88,8 +88,6 @@ exports.OvalTool = Montage.create(ShapeTool, {
 
                 canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial;
                 canvas.elementModel.shapeModel.fillMaterial = fillMaterial;
-                canvas.elementModel.shapeModel.strokeMaterialIndex = strokeIndex;
-                canvas.elementModel.shapeModel.fillMaterialIndex = fillIndex;
 
                 canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex;
                 canvas.elementModel.shapeModel.strokeStyle = strokeStyle;
diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js
index 6109ee4d..31ac7faa 100644
--- a/js/tools/RectTool.js
+++ b/js/tools/RectTool.js
@@ -62,16 +62,16 @@ exports.RectTool = Montage.create(ShapeTool, {
             var strokeMaterial = null;
             var fillMaterial = null;
 
-            var strokeIndex = parseInt(this.options.strokeMaterial);
-            if(strokeIndex > 0)
+            var strokeM = this.options.strokeMaterial;
+            if(strokeM)
             {
-                strokeMaterial = Object.create(MaterialsLibrary.getMaterialAt(strokeIndex-1));
+                strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM));
             }
 
-            var fillIndex = parseInt(this.options.fillMaterial);
-            if(fillIndex > 0)
+            var fillM = this.options.fillMaterial;
+            if(fillM)
             {
-                fillMaterial = Object.create(MaterialsLibrary.getMaterialAt(fillIndex-1));
+                fillMaterial = Object.create(MaterialsLibrary.getMaterial(fillM));
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
@@ -110,8 +110,6 @@ exports.RectTool = Montage.create(ShapeTool, {
 
                 canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial;
                 canvas.elementModel.shapeModel.fillMaterial = fillMaterial;
-                canvas.elementModel.shapeModel.strokeMaterialIndex = strokeIndex;
-                canvas.elementModel.shapeModel.fillMaterialIndex = fillIndex;
 
                 canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex;
                 canvas.elementModel.shapeModel.strokeStyle = strokeStyle;
-- 
cgit v1.2.3