4 files changed, 84 insertions, 20 deletions

diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.css b/js/components/treeview/ninja-branch.reel/ninja-branch.css
index 6a458cc7..d8c212e8 100644
--- a/js/components/treeview/ninja-branch.reel/ninja-branch.css
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.css
@@ -18,14 +18,15 @@
     width: 100%;
 }
 .treeRoot .branch .branch-label {
-    border-bottom: 1px solid #505050;
-    cursor: pointer;
-    padding: 3px 0 4px;
     background-repeat: no-repeat;
     background-position: 3px 2px;
-    box-shadow: 0 0 0 0 rgba(0,0,0,0);
-    font-weight: bold;
+    border-bottom: 1px solid #505050;
     box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
+    color: #FFF;
+    cursor: pointer;
+    font-weight: bold;
+    padding: 3px 0 4px;
+    text-shadow: 1px 1px 0 #000;
 }
 
 /* First Level */
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
index b2f427b5..085b11e0 100644
--- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
@@ -19,6 +19,8 @@
 /* Second level */
 .branch .branch .leaf-label {
     background-position: 25px center;
+    box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
+    color: #FFF;
     padding-left: 45px;
 }
 /* Third level */
diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html
index d70b016c..4f9e6a72 100644
--- a/js/components/treeview/treeview.reel/treeview.html
+++ b/js/components/treeview/treeview.reel/treeview.html
@@ -26,7 +26,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "name" : "Branch"
             },
             "defaultLeaf" : {
-                "module" : "js/components/treeview/presets-leaf.reel",
+                "module" : "js/components/treeview/leaf.reel",
                 "name" : "Leaf"
             },
             "scrollview": {
diff --git a/js/panels/properties/sections/position-and-size.reel/position-and-size.js b/js/panels/properties/sections/position-and-size.reel/position-and-size.js
index 43f08fcf..49117090 100644
--- a/js/panels/properties/sections/position-and-size.reel/position-and-size.js
+++ b/js/panels/properties/sections/position-and-size.reel/position-and-size.js
@@ -28,6 +28,14 @@ exports.PosSize = Montage.create(Component, {
         value: null
     },
 
+    aspectRatioWidth: {
+        value: null
+    },
+
+    aspectRatioHeight: {
+        value: null
+    },
+
     _disablePosition: {
         value: true
     },
@@ -62,9 +70,8 @@ exports.PosSize = Montage.create(Component, {
             this.widthControl.addEventListener("change", this, false);
             this.widthControl.addEventListener("changing", this, false);
 
-            
-            //this._controlList[0].control.addEventListener("action", this._handleStageEvent.bind(this), false);
-            //PropertiesPanelModule.PropertiesPanelBase.PIControlList["stageWidthHeightLock"] = this._controlList[0].control;
+            this.bindButton.identifier = "ratio";
+            this.bindButton.addEventListener("action", this, false);
 
         }
     },
@@ -87,6 +94,25 @@ exports.PosSize = Montage.create(Component, {
         }
     },
 
+    /**
+     * Calculate the current aspect ration when the bind button is pressed.
+     * If one of the values is 0, then use 1:1 as the ratio;
+     */
+    handleRatioAction: {
+        value: function() {
+            if(this.bindButton.value) {
+                this.aspectRatioWidth = this.heightControl.value / this.widthControl.value;
+                if(isNaN(this.aspectRatioWidth) || !isFinite(this.aspectRatioWidth) || this.aspectRatioWidth === 0) this.aspectRatioWidth = 1;
+
+                this.aspectRatioHeight = this.widthControl.value / this.heightControl.value;
+                if(isNaN(this.aspectRatioHeight) || !isFinite(this.aspectRatioHeight) || this.aspectRatioHeight === 0) this.aspectRatioHeight = 1;
+            } else {
+                this.aspectRatioWidth = 1;
+                this.aspectRatioHeight = 1;
+            }
+        }
+    },
+
     handleLeftChange: {
         value: function(event) {
             var prevPosition;
@@ -121,6 +147,17 @@ exports.PosSize = Montage.create(Component, {
                 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
                 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
+
+                if(this.bindButton.value) {
+
+                    var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value);
+
+                    if(!isFinite(newWidth)) newWidth = this.heightControl.value;
+
+                    this.widthControl.value = newWidth;
+                    this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Change", "pi");
+                }
+
                 this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Change", "pi", prevPosition);
                 this.savedPosition = null;
             }
@@ -135,9 +172,23 @@ exports.PosSize = Montage.create(Component, {
                 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
                 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
+
+                if(this.bindButton.value) {
+
+                    var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value);
+
+                    if(!isFinite(newHeight)) newHeight = this.widthControl.value;
+
+                    this.heightControl.value = newHeight;
+                    this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Change", "pi");
+
+                }
+
                 this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Change", "pi", prevPosition);
                 this.savedPosition = null;
+
             }
+
         }
     },
 
@@ -166,24 +217,22 @@ exports.PosSize = Montage.create(Component, {
             var items;
             if(!event.wasSetByCode) {
 
+                if(!this.savedPosition) this.savedPosition = this.heightSize;
+
+                this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
+
                 if(this.bindButton.value) {
-                    if(!this.savedPosition) this.savedPosition = this.heightSize;
-                    var delta = this.heightControl.value - this.savedPosition;
 
-                    var hwRatio = Math.round(Math.round(this.widthControl.value / this.savedPosition * 10) / 10);
-                    var newWidth = this.widthControl.value + hwRatio * delta;
+                    var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value);
+
+                    if(!isFinite(newWidth)) newWidth = this.heightControl.value;
 
-                    this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
                     this.widthControl.value = newWidth;
-                    this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Changing", "pi");
                     this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Changing", "pi");
-                } else {
+                }
 
-                    if(!this.savedPosition) this.savedPosition = this.heightSize;
+                this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Changing", "pi");