From f4df8204a57e1bc6021b651ebb2259f9931cf26f Mon Sep 17 00:00:00 2001
From: Pushkar Joshi
Date: Tue, 22 May 2012 13:21:32 -0700
Subject: allow changes in the pen subtool in options to be seen by the pen
 tool code (can now select the pen plus, pen minus subtools) AND

add keyboard shortcut for brush tool
---
 .../pen-properties.reel/pen-properties.js          | 28 ++++++++++++++++++++++
 1 file changed, 28 insertions(+)

(limited to 'js/components')

diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.js b/js/components/tools-properties/pen-properties.reel/pen-properties.js
index cd205e07..aba6cb61 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.js
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js
@@ -9,6 +9,17 @@ var ToolProperties = require("js/components/tools-properties/tool-properties").T
 
 var PenProperties = exports.PenProperties = Montage.create(ToolProperties, {
     addedColorChips: { value: false },
+    _penToolRadio:     { value: null, enumerable: false },
+    _penPlusRadio:   { value: null, enumerable: false },
+    _penMinusRadio:   { value: null, enumerable: false },
+
+    _subPrepare: {
+        value: function() {
+            this._penToolRadio.addEventListener("click", this, false);
+            this._penPlusRadio.addEventListener("click", this, false);
+            this._penMinusRadio.addEventListener("click", this, false);
+        }
+    },
 
     _fill: {
         enumerable: false,
@@ -50,6 +61,23 @@ var PenProperties = exports.PenProperties = Montage.create(ToolProperties, {
         }
     },
 
+    _selectedSubtool: {
+        value: "pen", enumerable: false
+    },
+
+    selectedSubtool: {
+        get: function() { return this._selectedSubtool;},
+        set: function(value) { this._selectedSubtool = value; }
+    },
+
+    handleClick: {
+        value: function(event) {
+            this._selectedSubtool = event._event.target.value;
+            console.log("handleClick changing pen tool subtool to "+this.selectedSubtool);
+            NJevent("penSubToolChange");
+        }
+    },
+
     draw: {
         enumerable: false,
         value: function () {
-- 
cgit v1.2.3


From e2ae637582b8e02125086201a64ee85761b01093 Mon Sep 17 00:00:00 2001
From: Pushkar Joshi
Date: Tue, 29 May 2012 14:24:47 -0700
Subject: More consistent local and global mouse coords which solves a bug with
 the Pen minus subtool not removing 1 anchor paths

---
 js/components/tools-properties/pen-properties.reel/pen-properties.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'js/components')

diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.js b/js/components/tools-properties/pen-properties.reel/pen-properties.js
index aba6cb61..c37359e1 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.js
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js
@@ -73,7 +73,6 @@ var PenProperties = exports.PenProperties = Montage.create(ToolProperties, {
     handleClick: {
         value: function(event) {
             this._selectedSubtool = event._event.target.value;
-            console.log("handleClick changing pen tool subtool to "+this.selectedSubtool);
             NJevent("penSubToolChange");
         }
     },
-- 
cgit v1.2.3


From d44f3196c925332dcaf45f7cf8c64e22a1994bb9 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 4 Jun 2012 17:11:06 -0700
Subject: Fill and Ink-Bottle fixes.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 .../fill-properties.reel/fill-properties.html      |  41 ++++++--
 .../fill-properties.reel/fill-properties.js        |  19 +---
 .../ink-bottle-properties.css                      |  15 ---
 .../ink-bottle-properties.html                     | 116 +++++++++------------
 .../ink-bottle-properties.js                       |  28 ++---
 5 files changed, 96 insertions(+), 123 deletions(-)

(limited to 'js/components')

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 734966dc..ca447b8b 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -11,10 +11,35 @@
 
         <script type="text/montage-serialization">
         {
-            "_fillMaterialCB": {
+            "useFillColor": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useFillColor"},
+                    "identifier": "useFillColor",
+                    "checked": true
+                }
+            },
+
+            "useWebGL": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useWebGL"},
+                    "identifier": "useWebGL",
+                    "checked": false
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"},
+                        "capture": false
+                    }
+                ]
+            },
+
+            "fillMaterial": {
                 "prototype": "js/components/combobox.reel",
                 "properties": {
-                    "element": {"#": "fillMaterialCB"},
+                    "element": {"#": "fillMaterial"},
                     "labelField": "_name",
                     "dataField": "_name"
                 }
@@ -24,11 +49,12 @@
                 "properties": {
                     "element": {"#": "fillProperties"},
 
+                    "useFillColor": {"@": "useFillColor"},
                     "_fillColorCtrl": {"#": "fillColorCtrl"},
 
-                    "_useWebGL": {"#": "useWebGLCH"},
+                    "useWebGL": {"@": "useWebGL"},
                     "_materialsContainer": {"#": "materialsContainer"},
-                    "_fillMaterial": {"@": "_fillMaterialCB"}
+                    "fillMaterial": {"@": "fillMaterial"}
                 }
             }
     	}
@@ -38,16 +64,17 @@
 
     <body>
         <div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool toolOptionsFloatChildren">
+            <input data-montage-id="useFillColor" type="checkbox" name="useFillColorControl" class="nj-skinned"/>
             <div class="toolColorChipIcon FillTool"></div>
             <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
             <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
 
-            <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
+            <input data-montage-id="useWebGL" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
             <label class="label">Use WebGL</label>
-            <div data-montage-id="materialsContainer" class="materialsContainerOptions toolOptionsFloatChildren">
+            <div data-montage-id="materialsContainer" class="materialsContainerOptions toolOptionsFloatChildren" style="display:none;">
                 <label class="label">Material:</label>
                 <div data-montage-id="fillIcon" class="toolColorChipIcon FillTool"></div>
-                <select data-montage-id="fillMaterialCB" class="nj-skinned">
+                <select data-montage-id="fillMaterial" class="nj-skinned">
                 </select>
             </div>
         </div>
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 ae136956..7331b375 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.js
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.js
@@ -10,7 +10,6 @@ var Montage = require("montage/core/core").Montage,
 
 var FillProperties = exports.FillProperties = Montage.create(ToolProperties, {
 
-    _use3D: { value: false },
     addedColorChips: { value: false },
 
     _fill: {
@@ -59,29 +58,17 @@ var FillProperties = exports.FillProperties = Montage.create(ToolProperties, {
 
     _subPrepare: {
         value: function() {
-            Object.defineBinding(this._fillMaterial, "items", {
+            Object.defineBinding(this.fillMaterial, "items", {
                 boundObject: this.application.ninja.appModel,
                 boundObjectPropertyPath: "materials",
                 oneway: false
             });
-
-            this.handleChange(null);
-            this._useWebGL.addEventListener("change", this, false);
         }
     },
 
-    handleChange: {
+    handleAction: {
         value: function(event) {
-            if(this._useWebGL.checked)
-            {
-                this._use3D = true;
-                this._materialsContainer.style["display"] = "";
-            }
-            else
-            {
-                this._use3D = false;
-                this._materialsContainer.style["display"] = "none";
-            }
+            (this.useWebGL.checked) ? this._materialsContainer.style["display"] = "" : this._materialsContainer.style["display"] = "none";
         }
     }
 });
\ No newline at end of file
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
index 3dba17b6..dae64eb3 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
@@ -8,18 +8,3 @@
 .inkBottleOptions select.nj-skinned {
 	margin-top: 2px;
 }
-
-.inkBottleOptions label.disabled {
-    color:#999999;
-}
-
-.inkBottleOptions label.disabled:hover {
-    color:#999999;
-    background-color: transparent;
-    cursor:default;
-}
-
-.inkBottleOptions div.disabled:hover {
-    background-color: transparent;
-    cursor:default;
-}
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 3ac0b261..5620eed8 100755
--- 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
@@ -11,12 +11,21 @@
 
         <script type="text/montage-serialization">
         {
-            "borderWidthCh": {
+            "useStrokeColor": {
                 "prototype": "montage/ui/checkbox.reel",
                 "properties": {
-                    "element": {"#": "useBorderWidthCh"},
-                    "identifier": "useBorderWidth",
+                    "element": {"#": "useStrokeColor"},
+                    "identifier": "useStrokeColor",
                     "checked": true
+                }
+            },
+
+            "useBorderWidth": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useBorderWidth"},
+                    "identifier": "useBorderWidth",
+                    "checked": false
                 },
                 "listeners": [
                     {
@@ -27,31 +36,24 @@
                 ]
             },
 
-            "borderWidthLabel": {
-                "prototype": "montage/ui/dynamic-text.reel",
-                "properties": {
-                    "element": {"#": "borderWidthLabel"},
-                    "value": "Border:"
-                }
-            },
-
-            "borderWidthHT": {
+            "borderWidth": {
                 "prototype": "js/components/hottextunit.reel[HotTextUnit]",
                 "properties": {
                     "element": {"#": "borderWidth"},
                     "minValue": 1,
                     "maxValue": 100,
                     "value": 1,
-                    "acceptableUnits" : ["px", "pt"]
+                    "acceptableUnits" : ["px", "pt"],
+                    "enabled": false
                 }
             },
 
-            "borderStyleCh": {
+            "useBorderStyle": {
                 "prototype": "montage/ui/checkbox.reel",
                 "properties": {
-                    "element": {"#": "useBorderStyleCh"},
+                    "element": {"#": "useBorderStyle"},
                     "identifier": "useBorderStyle",
-                    "checked": true
+                    "checked": false
                 },
                 "listeners": [
                     {
@@ -62,20 +64,12 @@
                 ]
             },
 
-            "borderStyleLabel": {
-                "prototype": "montage/ui/dynamic-text.reel",
-                "properties": {
-                    "element": {"#": "borderStyleLabel"},
-                    "value": "Style:"
-                }
-            },
-
-            "strokeSizeCh": {
+            "useStrokeSize": {
                 "prototype": "montage/ui/checkbox.reel",
                 "properties": {
-                    "element": {"#": "useStrokeSizeCh"},
+                    "element": {"#": "useStrokeSize"},
                     "identifier": "useStrokeSize",
-                    "checked": true
+                    "checked": false
                 },
                 "listeners": [
                     {
@@ -86,15 +80,7 @@
                 ]
             },
 
-            "strokeSizeLabel": {
-                "prototype": "montage/ui/dynamic-text.reel",
-                "properties": {
-                    "element": {"#": "strokeSizeLabel"},
-                    "value": "Stroke:"
-                }
-            },
-
-            "strokeSizeHT": {
+            "strokeSize": {
                 "prototype": "js/components/hottextunit.reel[HotTextUnit]",
                 "properties": {
                     "element": {"#": "strokeSize"},
@@ -102,16 +88,17 @@
                     "maxValue": 100,
                     "value": 1,
                     "decimalPlace": 10,
-                    "acceptableUnits" : ["px", "pt"]
+                    "acceptableUnits" : ["px", "pt"],
+                    "enabled": false
                 }
             },
 
-            "webGlCh": {
+            "useWebGL": {
                 "prototype": "montage/ui/checkbox.reel",
                 "properties": {
-                    "element": {"#": "useWebGLCHIB"},
-                    "identifier": "useWebGl",
-                    "checked": true
+                    "element": {"#": "useWebGL"},
+                    "identifier": "useWebGL",
+                    "checked": false
                 },
                 "listeners": [
                     {
@@ -122,10 +109,10 @@
                 ]
             },
 
-            "_strokeMaterialCB": {
+            "strokeMaterial": {
                 "prototype": "js/components/combobox.reel",
                 "properties": {
-                    "element": {"#": "strokeMaterialIBCB"},
+                    "element": {"#": "strokeMaterial"},
                     "labelField": "_name",
                     "dataField": "_name"
                 }
@@ -136,23 +123,21 @@
                 "properties": {
                     "element": {"#": "inkBottleProperties"},
 
+                    "useStrokeColor": {"@": "useStrokeColor"},
                     "_strokeColorCtrl": {"#": "strokeColorCtrl"},
 
-                    "useBorderWidth": {"@": "borderWidthCh"},
-                    "borderWidthLabel": {"@": "borderWidthLabel"},
-                    "_borderWidth": {"@": "borderWidthHT"},
+                    "useBorderWidth": {"@": "useBorderWidth"},
+                    "borderWidth": {"@": "borderWidth"},
 
-                    "useBorderStyle": {"@": "borderStyleCh"},
-                    "borderStyleLabel": {"@": "borderStyleLabel"},
-                    "_borderStyle": {"#": "borderStyleCB"},
+                    "useBorderStyle": {"@": "useBorderStyle"},
+                    "borderStyle": {"#": "borderStyle"},
 
-                    "useStrokeSize": {"@": "strokeSizeCh"},
-                    "strokeSizeLabel": {"@": "strokeSizeLabel"},
-                    "_strokeSize": {"@": "strokeSizeHT"},
+                    "useStrokeSize": {"@": "useStrokeSize"},
+                    "strokeSize": {"@": "strokeSize"},
 
-                    "_useWebGL": {"@": "webGlCh"},
+                    "useWebGL": {"@": "useWebGL"},
                     "_materialsContainer": {"#": "materialsContainerIB"},
-                    "_strokeMaterial": {"@": "_strokeMaterialCB"}
+                    "strokeMaterial": {"@": "strokeMaterial"}
                 }
             }
         }
@@ -163,16 +148,19 @@
     <body>
         <div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleOptions toolOptionsFloatChildren">
             <div data-montage-id="elementInkOptions" class="toolOptionsFloatChildren">
+
+                <input data-montage-id="useStrokeColor" type="checkbox" name="useStrokeColor" class="nj-skinned" title="Apply stroke or border-color"/>
                 <div class="toolColorChipIcon PencilTool"></div>
                 <div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div>
                 <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
 
-                <input data-montage-id="useBorderWidthCh" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/>
-                <label data-montage-id="borderWidthLabel" class="label"> Border:</label>
+                <input data-montage-id="useBorderWidth" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/>
+                <label class="label"> Border:</label>
                 <div data-montage-id="borderWidth" class="label"></div>
-                <input data-montage-id="useBorderStyleCh" type="checkbox" name="useBorderStyleControl" class="nj-skinned" title="Apply border-style"/>
-                <label data-montage-id="borderStyleLabel" class="label"> Style:</label>
-                <select data-montage-id="borderStyleCB" class="nj-skinned">
+
+                <input data-montage-id="useBorderStyle" type="checkbox" name="useBorderStyleControl" class="nj-skinned" title="Apply border-style"/>
+                <label class="label"> Style:</label>
+                <select data-montage-id="borderStyle" class="nj-skinned" disabled="disabled">
                     <option value="none">none</option>
                     <option value="solid" selected>solid</option>
                     <option value="hidden">hidden</option>
@@ -191,19 +179,19 @@
             <div class="toolOptionsSpacer">&nbsp;</div>
 
             <div data-montage-id="shapeInkOptions" class="toolOptionsFloatChildren">
-                <input data-montage-id="useStrokeSizeCh" type="checkbox" name="useStrokeControl" class="nj-skinned" title="Apply stroke size"/>
-                <label data-montage-id="strokeSizeLabel" class="label"> Stroke:</label>
+                <input data-montage-id="useStrokeSize" type="checkbox" name="useStrokeControl" class="nj-skinned" title="Apply stroke size"/>
+                <label class="label"> Stroke:</label>
                 <div data-montage-id="strokeSize" class="label"></div>
             </div>
 
             <div data-montage-id="webGLInkOptions" class="toolOptionsFloatChildren">
-                <input data-montage-id="useWebGLCHIB" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
+                <input data-montage-id="useWebGL" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
                 <label class="label"> Use WebGL</label>
 
-                <div data-montage-id="materialsContainerIB" class="toolOptionsFloatChildren">
+                <div data-montage-id="materialsContainerIB" class="toolOptionsFloatChildren" style="display:none;">
                     <label class="label"> Materials:</label>
                     <div data-montage-id="strokeIconIB" class="toolColorChipIcon PencilTool"></div>
-                    <select data-montage-id="strokeMaterialIBCB" class="nj-skinned"></select>
+                    <select data-montage-id="strokeMaterial" class="nj-skinned"></select>
                 </div>
             </div>
         </div>
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 945df857..7affe581 100755
--- 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
@@ -28,7 +28,7 @@ var InkBottleProperties = exports.InkBottleProperties = Montage.create(ToolPrope
         }
     },
 
-        draw: {
+    draw: {
         enumerable: false,
         value: function () {
             Object.getPrototypeOf(InkBottleProperties).draw.call(this);
@@ -58,7 +58,7 @@ var InkBottleProperties = exports.InkBottleProperties = Montage.create(ToolPrope
 
     _subPrepare: {
         value: function() {
-            Object.defineBinding(this._strokeMaterial, "items", {
+            Object.defineBinding(this.strokeMaterial, "items", {
                 boundObject: this.application.ninja.appModel,
                 boundObjectPropertyPath: "materials",
                 oneway: false
@@ -72,33 +72,19 @@ var InkBottleProperties = exports.InkBottleProperties = Montage.create(ToolPrope
                 val = event.currentTarget.identifier;
             switch(val) {
                 case "useBorderWidth":
-                    if(ch.checked) {
-                        this.borderWidthLabel.element.classList.remove("disabled");
-                        this._borderWidth.enabled = true;
-                    } else {
-                        this.borderWidthLabel.element.classList.add("disabled");
-                        this._borderWidth.enabled = false;
-                    }
+                    this.borderWidth.enabled = ch.checked;
                     break;
                 case "useBorderStyle":
                     if(ch.checked) {
-                        this.borderStyleLabel.element.classList.remove("disabled");
-                        this._borderStyle.removeAttribute("disabled")
+                        this.borderStyle.removeAttribute("disabled");
                     } else {
-                        this.borderStyleLabel.element.classList.add("disabled");
-                        this._borderStyle.setAttribute("disabled", "disabled");
+                        this.borderStyle.setAttribute("disabled", "disabled");
                     }
                     break;
                 case "useStrokeSize":
-                    if(ch.checked) {
-                        this.strokeSizeLabel.element.classList.remove("disabled");
-                        this._strokeSize.enabled = true
-                    } else {
-                        this.strokeSizeLabel.element.classList.add("disabled");
-                        this._strokeSize.enabled = false;
-                    }
+                    this.strokeSize.enabled = ch.checked;
                     break;
-                case "useWebGl":
+                case "useWebGL":
                     (ch.checked) ? this._materialsContainer.style["display"] = "" : this._materialsContainer.style["display"] = "none";
                     break;
             }
-- 
cgit v1.2.3


From c82ac0c0a0120f45c9bb4a42bdd2502d0cc77bdb Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Tue, 5 Jun 2012 21:38:25 -0700
Subject: cleanup and making the webgl-helper only loop canvas on file save

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/components/converter/string-units-converter.js | 2 --
 js/components/converter/string-value-converter.js | 2 --
 2 files changed, 4 deletions(-)

(limited to 'js/components')

diff --git a/js/components/converter/string-units-converter.js b/js/components/converter/string-units-converter.js
index 6b97d5c5..9f6e4112 100644
--- a/js/components/converter/string-units-converter.js
+++ b/js/components/converter/string-units-converter.js
@@ -9,7 +9,6 @@ var Montage = require("montage").Montage,
 
 exports.StringUnitsConverter = Montage.create(Converter, {
 
-    // convert fahrenheit to celsius (showing our non-metric heritage here)
     convert: {
         value: function(value) {
             if(value) {
@@ -20,7 +19,6 @@ exports.StringUnitsConverter = Montage.create(Converter, {
         }
     },
 
-    // revert celsius to fahrenheit
     revert: {
         value: function(value) {
             console.log("revert string to unit ", value);
diff --git a/js/components/converter/string-value-converter.js b/js/components/converter/string-value-converter.js
index 28d7dd29..f397f731 100644
--- a/js/components/converter/string-value-converter.js
+++ b/js/components/converter/string-value-converter.js
@@ -9,7 +9,6 @@ var Montage = require("montage").Montage,
 
 exports.StringValueConverter = Montage.create(Converter, {
 
-    // convert fahrenheit to celsius (showing our non-metric heritage here)
     convert: {
         value: function(value) {
             console.log(value);
@@ -18,7 +17,6 @@ exports.StringValueConverter = Montage.create(Converter, {
         }
     },
 
-    // revert celsius to fahrenheit
     revert: {
         value: function(value) {
             console.log("revert string to value ", value);
-- 
cgit v1.2.3


From 806974142d44afdd23534bf2d18eff0a8e701e0c Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Fri, 8 Jun 2012 16:59:59 -0700
Subject: rewrite: currentSelectedContainer -> domContainer

Fixed the currentSelectedContainer by removing bindings and using property change on the current document
added the red outline back.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../layout/bread-crumb.reel/bread-crumb.js         | 42 +++++++++-------------
 1 file changed, 16 insertions(+), 26 deletions(-)

(limited to 'js/components')

diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js
index ac131f2c..260922b3 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.js
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -51,22 +51,6 @@ exports.Breadcrumb = Montage.create(Component, {
         }
     },
 
-    _container:{
-        value:null
-    },
-
-    container: {
-        set: function(value) {
-            if(this._container !== value) {
-                this._container = value;
-                this.createContainerElements();
-            }
-        },
-        get: function() {
-            return this._container;
-        }
-    },
-
     containerElements: {
         value: []
     },
@@ -74,31 +58,37 @@ exports.Breadcrumb = Montage.create(Component, {
     prepareForDraw: {
         value: function() {
             this.breadcrumbBt.addEventListener("action", this, false);
+            this.addPropertyChangeListener("currentDocument.model.domContainer", this)
         }
     },
 
-    createContainerElements: {
+    handleChange: {
         value: function() {
-            var parentNode;
+            if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) {
+                this.createContainerElements(this.currentDocument.model.getProperty("domContainer"));
+            }
+        }
+    },
+
+    createContainerElements: {
+        value: function(container) {
 
 //            delete this.containerElements;
                 this.containerElements = [];
 
-            parentNode = this.container;
-
-            while(parentNode !== this.currentDocument.model.documentRoot) {
-                this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName});
-                parentNode = parentNode.parentNode;
+            while(container !== this.currentDocument.model.documentRoot) {
+                this.containerElements.unshift({"node": container, "nodeUuid":container.uuid, "label": container.nodeName});
+                container = container.parentNode;
             }
 
             // This is always the top container which is now hardcoded to body
-            this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName});
+            this.containerElements.unshift({"node": container, "nodeUuid":container.uuid, "label": container.nodeName});
         }
     },
 
     handleAction: {
         value: function(evt) {
-            if(evt.target.value === this.container.uuid) {
+            if(evt.target.value === this.currentDocument.model.domContainer.uuid) {
                 return;
             }
 
@@ -109,7 +99,7 @@ exports.Breadcrumb = Montage.create(Component, {
             }
 
             // TODO: This is bound 2 ways, update the internal property
-            this.application.ninja.currentSelectedContainer = this.containerElements[i].node;
+            this.currentDocument.model.domContainer = this.containerElements[i].node;
         }
     }
 });
-- 
cgit v1.2.3