Timeline: Refactor style and layer to use pointers to parent components.

2 files changed, 29 insertions, 13 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index f7b66a39..f53d54aa 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -13,7 +13,10 @@ var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
 var Layer = exports.Layer = Montage.create(Component, {

     

     /* Begin: Models */

-

+        _timelinePanel: {

+                value: null

+        },

+        

         _dynamicLayerTag: {

                 value: null

         },

@@ -664,6 +667,14 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));

         }

     },

+    

+    willDraw: {

+        value: function() {

+                if (this._timelinePanel === null) {

+                        this._timelinePanel = this.parentComponent.parentComponent;

+                }

+        }

+    },

 

     draw: {

         value: function() {

@@ -770,11 +781,11 @@ var Layer = exports.Layer = Montage.create(Component, {
                         // Dispatch the event to the TimelineTrack component associated with this Layer.

                         var myIndex = false,

                                 i = 0, 

-                                arrLayersLength = this.parentComponent.parentComponent.arrLayers.length,

+                                arrLayersLength = this._timelinePanel.arrLayers.length,

                                 arrTracks = document.querySelectorAll('[data-montage-id="track"]');

                         

                         for (i = 0; i < arrLayersLength; i++) {

-                                if (this.stageElement == this.parentComponent.parentComponent.arrLayers[i].layerData.stageElement) {

+                                if (this.stageElement == this._timelinePanel.arrLayers[i].layerData.stageElement) {

                                         myIndex = i;

                                 }

                         }

@@ -1005,7 +1016,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         },

         handleDragleave: {

                 value: function(event) {

-                        if (this.parentComponent.parentComponent.draggingType !== "layer") {

+                        if (this._timelinePanel.draggingType !== "layer") {

                                 return;

                         }

                         this.element.classList.remove("dragOver");

@@ -1013,14 +1024,14 @@ var Layer = exports.Layer = Montage.create(Component, {
         },

         handleDragstart: {

                 value: function(event) {

-                        //this.parentComponent.parentComponent.dragLayerID = this.layerID;

+                        //this._timelinePanel.dragLayerID = this.layerID;

             event.dataTransfer.setData('Text', 'Layer');

-            this.parentComponent.parentComponent.draggingType = "layer";

+            this._timelinePanel.draggingType = "layer";

                 }

         },

         handleDragover: {

                 value: function(event) {

-                        if (this.parentComponent.parentComponent.draggingType !== "layer") {

+                        if (this._timelinePanel.draggingType !== "layer") {

                                 return;

                         }

                         event.preventDefault();

@@ -1032,13 +1043,13 @@ var Layer = exports.Layer = Montage.create(Component, {
         

         handleDrop : {

                 value: function(event) {

-                        if (this.parentComponent.parentComponent.draggingType !== "layer") {

+                        if (this._timelinePanel.draggingType !== "layer") {

                                 return;

                         }

                         event.stopPropagation();

                         this.element.classList.remove("dragOver");

-                        if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) {

-                                this.parentComponent.parentComponent.dropLayerID = this.layerID;

+                        if (this._timelinePanel.dragLayerID !== this.layerID) {

+                                this._timelinePanel.dropLayerID = this.layerID;

                         }

                         return false;

                 }

diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index 78bc2db3..802c6311 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -284,6 +284,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                 this.init();
         }
     },
+    willDraw: {
+        value: function() {
+                if (this._parentLayerComponent === null) {
+                        this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent;
+                }
+        }
+    },
     draw: {
         value: function() {
                 // Show the right view
@@ -372,9 +379,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
                 var arrHints = [],
                         i = 0;
-                
-                this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent;
-                
+                                
                 // Get the array of hints from _myTweenables:
                 for (i = 0; i < this._myTweenables.length; i++) {
                         arrHints.push(this._myTweenables[i].property)