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>

1 files changed, 15 insertions, 13 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index d7329ac7..f7ab5117 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -53,6 +53,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             }
         }
     },
+
+    handleChange: {
+        value: function() {
+            if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) {
+                this.currentSelectedContainer = this.currentDocument.model.getProperty("domContainer");
+            }
+        }
+    },
     
     _currentSelectedContainer: {
         value: null
@@ -405,13 +413,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false);
             document.addEventListener("click", this.handleDocumentClick.bind(this), false);
 
-
-            // Bind some bindings
-            Object.defineBinding(this, "currentSelectedContainer", {
-                boundObject:this.application.ninja,
-                boundObjectPropertyPath:"currentSelectedContainer",
-                oneway:true
-            });
+            this.addPropertyChangeListener("currentDocument.model.domContainer", this);
 
         }
     },
@@ -512,7 +514,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         if (this._boolCacheArrays) {
                                 // ... but only if we're supposed to.
                         this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
-                        this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.application.ninja.currentSelectedContainer;
+                        this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer;
                         this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
                         this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected;
                         this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected;
@@ -525,7 +527,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         // Initialize the currentDocument for a new set of timeline data.
                         this.application.ninja.currentDocument.isTimelineInitialized = true;
                         this.application.ninja.currentDocument.tlArrLayers = [];
-                this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.application.ninja.currentSelectedContainer;
+                this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer;
                 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
                 this.application.ninja.currentDocument.tlCurrentLayerSelected = false;
                 this.application.ninja.currentDocument.tlCurrentLayersSelected = false;
@@ -669,7 +671,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 // console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick');
                                 // Information stored, but we're moving up or down in the breadcrumb.
                                 // Get the current selection and restore timeline info for its children.
-                var parentNode = this.application.ninja.currentSelectedContainer,
+                var parentNode = this.currentDocument.model.domContainer,
                         storedCurrentLayerNumber = this.application.ninja.currentDocument.tllayerNumber;
                 this.temparrLayers = [];
                 
@@ -708,7 +710,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
                 //debugger;
                 if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") {
-//                      this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer;
+//                      this.currentDocument.model.domContainer = this.application.ninja.currentDocument.tlCurrentSelectedContainer;
                 }
                 
                 // Are we only showing animated layers?
@@ -984,7 +986,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             thingToPush.layerData.layerName = newLayerName;
             thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">";
             thingToPush.layerData.layerID = this.currentLayerNumber;
-            thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
+            thingToPush.parentElement = this.currentDocument.model.domContainer;
             thingToPush.layerData.isSelected = true;
             thingToPush.layerData._isFirstDraw = true;
             thingToPush.layerData.created = true;
@@ -1032,7 +1034,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             thingToPush.layerData.layerName = newLayerName;
             thingToPush.layerData.layerID = this.currentLayerNumber;
             thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">";
-            thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
+            thingToPush.parentElement = this.currentDocument.model.domContainer;
             if (this.checkable_animated.classList.contains("checked")) {
                 thingToPush.layerData.isVisible = false;
             }