From 4c3aac5eabd93052b1554a03d78235215bb49db4 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 29 May 2012 00:34:40 -0700 Subject: document bindings phase 1 - using array controller to bind the current document to all ninja components - removed open document event - removed references to the document controller Signed-off-by: Valerio Virgillito --- js/panels/Timeline/Layer.reel/Layer.js | 4 ++-- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1 - js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++-- 3 files changed, 4 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index e8619d02..16fb0303 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -717,7 +717,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dynamicLayerName.value = this._layerEditable.value; this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.dynamicLayerName.value; this.needsDraw = true; - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; } }, handleAddStyleClick: { @@ -745,7 +745,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dynamicLayerName.value = newVal; this.layerName = newVal; this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = newVal; - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; this.needsDraw = true; } }, diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index c55e5a24..b1fc97e4 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -335,7 +335,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function () { this.initTimeline(); // Bind the event handler for the document change events - //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false); this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false); //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false); //this.eventManager.addEventListener("breadCrumbBinding",this,false); diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index ff684446..126e6a61 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -564,7 +564,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.nextKeyframe += 1; } - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; } }, @@ -683,7 +683,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { keyframeString += " }"; // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); - this.application.ninja.documentController.activeDocument.model.needsSave = true; + this.application.ninja.currentDocument.model.needsSave = true; } }, -- cgit v1.2.3 From 501221d0bbf776ce71bc7ae0f482c931f6651659 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 30 May 2012 14:51:25 -0700 Subject: fixing the timeline current document bindings Signed-off-by: Valerio Virgillito --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 88 +++++++++++----------- 1 file changed, 46 insertions(+), 42 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index b1fc97e4..6e9513f2 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -15,6 +15,41 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, /* === BEGIN: Models === */ + _currentDocument: { + value : null + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + if(!this._currentDocument && value.currentView === "design") { + this.enablePanel(true); + } + + this._currentDocument = value; + + if(!value) { + this.enablePanel(false); + } else if(this._currentDocument.currentView === "design") { + this._boolCacheArrays = false; + this.clearTimelinePanel(); + this._boolCacheArrays = true; + + // Rebind the document events for the new document context + this._bindDocumentEvents(); + + // TODO: Fix the init function so that it can be called here instead of when container changes + // this.initTimelineForDocument(); + } + } + }, + _arrLayers:{ value:[] }, @@ -144,8 +179,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return this._currentSelectedContainer; }, set: function(newVal) { - this._currentSelectedContainer = newVal; - this.handleDocumentChange(); + if(this._currentSelectedContainer !== newVal) { + this._currentSelectedContainer = newVal; + + this._boolCacheArrays = false; + this.clearTimelinePanel(); + this._boolCacheArrays = true; + + // TODO: Fix the function so that we can remove this call here. + this.initTimelineForDocument(); + } } }, @@ -233,7 +276,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { set:function (value) { if (this._breadCrumbContainer !== value) { this._breadCrumbContainer = value; - //this.LayerBinding(); } } }, @@ -334,11 +376,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { prepareForDraw:{ value:function () { this.initTimeline(); - // Bind the event handler for the document change events - this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false); - //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false); - //this.eventManager.addEventListener("breadCrumbBinding",this,false); - + // Bind drag and drop event handlers this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); @@ -710,44 +748,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleDocumentChange:{ value:function () { - if (this.application.ninja.currentDocument == null) { - // On app initialization, the binding is triggered before - // there is a currentDocument. We don't do anything at that time. - return; - } - // this.application.ninja.currentDocument.setLevel = true; - this._boolCacheArrays = false; - this.clearTimelinePanel(); - this._boolCacheArrays = true; - - // Rebind the document events for the new document context - this._bindDocumentEvents(); - - // Reinitialize the timeline...but only if there are open documents. - if (this.application.ninja.documentController._documents.length > 0) { - this.enablePanel(true); - this.initTimelineForDocument(); - - } else { - this.enablePanel(false); - } - } - }, - - LayerBinding:{ - value:function (node) { - var i = 0; - if(this._firstTimeLoaded){ - this._firstTimeLoaded = false; - return; - } - - this.handleDocumentChange(node); } }, - updateTrackContainerWidth:{ value:function () { this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; -- cgit v1.2.3 From 66007a04da84cae1d81af5340b11706d5f25c89d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 31 May 2012 17:09:45 -0700 Subject: Timeline: Bug fixes for deleting styles and their associated tracks correctly. --- js/panels/Timeline/Layer.reel/Layer.js | 55 +++++++++++----------- js/panels/Timeline/Style.reel/Style.js | 2 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1 + .../Timeline/TimelineTrack.reel/TimelineTrack.js | 4 +- 4 files changed, 31 insertions(+), 31 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index db4ad712..9576d66f 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -83,6 +83,7 @@ var Layer = exports.Layer = Montage.create(Component, { return; } if (newVal !== this._selectedStyleIndex) { + console.log("Layer.selectedStyleIndex.set ", newVal); this._selectedStyleIndex = newVal; this.layerData.selectedStyleIndex = newVal; this.needsDraw = true; @@ -638,37 +639,34 @@ var Layer = exports.Layer = Montage.create(Component, { }, deleteStyle : { value: function() { - var newEvent = document.createEvent("CustomEvent"), - selectedIndex = 0; - if (this.arrLayerStyles.length > 0) { - if (!!this.styleRepetition.selectedIndexes) { - - selectedIndex = this.styleRepetition.selectedIndexes[0]; + + // Only delete a style if we have one or more styles, and one of them is selected + if ((this.arrLayerStyles.length > 0) && (this.selectedStyleIndex !== false)) { + var newEvent = document.createEvent("CustomEvent"); - // Set up the event info and dispatch the event - newEvent.initCustomEvent("layerEvent", false, true); - newEvent.layerEventLocale = "styles"; - newEvent.layerEventType = "deleteStyle"; - newEvent.layerID = this.layerID; - newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID; - newEvent.styleSelection = selectedIndex; - defaultEventManager.dispatchEvent(newEvent); - - // Delete the style from the view - this.arrLayerStyles.splice(selectedIndex, 1); - - // Was that the last style? - if (this.arrLayerStyles.length === 0) { - this.buttonDeleteStyle.classList.add("disabled"); - } - - } - } + // Set up the event info and dispatch the event + newEvent.initCustomEvent("layerEvent", false, true); + newEvent.layerEventLocale = "styles"; + newEvent.layerEventType = "deleteStyle"; + newEvent.layerID = this.layerID; + newEvent.styleID = this.selectedStyleIndex; + newEvent.selectedStyleIndex = this.selectedStyleIndex; + defaultEventManager.dispatchEvent(newEvent); + + // Delete the style from the view + this.arrLayerStyles.splice(this.selectedStyleIndex, 1); + + // Set selection to none + this.selectedStyleIndex = false; + + // Disable the delete style button, because now nothing is selected + this.buttonDeleteStyle.classList.add("disabled"); + } } }, selectStyle : { value: function(styleIndex) { - //console.log("Layer.selectStyle ", styleIndex); + console.log("Layer.selectStyle ", styleIndex); // Select a style based on its index. // use layerIndex = false to deselect all styles. @@ -771,7 +769,9 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleMousedown: { value: function(event) { - //console.log("Layer.handleMousedown") + if (event.target.classList.contains("button-delete")) { + return; + } this.layerData.isActive = true; var ptrParent = nj.queryParentSelector(event.target, ".content-style"), activeStyleIndex = this.getActiveStyleIndex(); @@ -783,7 +783,6 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleLayerClick : { value: function(event) { - //console.log("Layer.handleLayerClick") var ptrParent = nj.queryParentSelector(event.target, ".content-style"); if (ptrParent !== false) { var myIndex = this.getActiveStyleIndex(); diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index d712f2bd..185c9bb0 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -35,7 +35,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { return this._isSelected; }, set: function(newVal) { - console.log("Style["+this.styleID+"].isSelected.set ", newVal) + //console.log("Style["+this.styleID+"].isSelected.set ", newVal) if (newVal !== this._isSelected) { this._isSelected = newVal; this.needsDraw = true; diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a3965eb2..9f9a747a 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -919,6 +919,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { for (i = 0; i < arrLayersLength; i++) { if (this.arrLayers[i].layerData.isSelected === true) { if (arrSelectedIndexes.indexOf(i) < 0) { + console.log("TimelinePanel.selectLayers, deselecting ", i); this.arrLayers[i].layerData.isSelected = false; this.triggerLayerBinding(i); } diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 8dc19958..6b66bda9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -969,8 +969,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.arrStyleTracks.push(restoredStyleTrack); } else if (layerEvent.layerEventType === "deleteStyle") { - // TODO: Delete the right track. Index can be passed in event object, use that for splice(). - this.arrStyleTracks.pop(); + // We are deleting a style, so delete the associated track + this.arrStyleTracks.splice(layerEvent._event.selectedStyleIndex, 1); } } }, -- cgit v1.2.3 From 4338d57eed565f723bfb7cbcefca65836b68953b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 1 Jun 2012 14:26:30 -0700 Subject: Timeline: Better style selection and deselection. Automatic re-selection of previously selected style when parent layer is reselected. --- js/panels/Timeline/Layer.reel/Layer.js | 56 +++++++++++++++------- js/panels/Timeline/Layer.reel/scss/Layer.scss | 6 +-- js/panels/Timeline/Style.reel/Style.js | 2 +- js/panels/Timeline/Style.reel/css/Style.css | 12 +++++ js/panels/Timeline/Style.reel/scss/Style.scss | 8 +++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 27 +++++++++-- 6 files changed, 84 insertions(+), 27 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 9576d66f..4da1bfba 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -83,13 +83,14 @@ var Layer = exports.Layer = Montage.create(Component, { return; } if (newVal !== this._selectedStyleIndex) { - console.log("Layer.selectedStyleIndex.set ", newVal); this._selectedStyleIndex = newVal; this.layerData.selectedStyleIndex = newVal; - this.needsDraw = true; } } }, + _storedStyleIndex : { + value: false + }, /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ @@ -277,6 +278,10 @@ var Layer = exports.Layer = Montage.create(Component, { if (value === false) { // If changing from true to false, we need to deselect any associated styles this.selectStyle(false); + } else { + if (this._storedStyleIndex !== false) { + this.selectStyle(this._storedStyleIndex); + } } this._isSelected = value; this.layerData.isSelected = value; @@ -541,7 +546,7 @@ var Layer = exports.Layer = Montage.create(Component, { } // Enable or disable the delete style button as appropriate if (this.isSelected) { - if (this.selectedStyleIndex !== "false") { + if (this.selectedStyleIndex !== false) { this.selectStyle(this.selectedStyleIndex); this.buttonDeleteStyle.classList.remove("disabled"); } @@ -630,6 +635,7 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.ruleTweener = false; newStyle.isSelected = false; this.arrLayerStyles.push(newStyle); + this.selectStyle(this.arrLayerStyles.length -1); // Set up the event info and dispatch the event this.styleCounter += 1; @@ -666,26 +672,37 @@ var Layer = exports.Layer = Montage.create(Component, { }, selectStyle : { value: function(styleIndex) { - console.log("Layer.selectStyle ", styleIndex); - // Select a style based on its index. // use layerIndex = false to deselect all styles. var i = 0, arrLayerStylesLength = this.arrLayerStyles.length; - - // First, update this.arrStyles[].isSelected - for (i = 0; i < arrLayerStylesLength; i++) { - if (i === styleIndex) { - this.arrLayerStyles[i].isSelected = true; - } else { - if (this.arrLayerStyles[i].isSelected === true) { - this.arrLayerStyles[i].isSelected = false; - } - } - } - - + if (styleIndex === false) { + if (arrLayerStylesLength === 0) { + // No styles selected, so do nothing. + return; + } + for (i = 0; i < arrLayerStylesLength; i++) { + if (this.arrLayerStyles[i].isSelected === true) { + this.arrLayerStyles[i].isSelected = false; + } + } + } else { + for (i = 0; i < arrLayerStylesLength; i++) { + if (i === styleIndex) { + this.arrLayerStyles[i].isSelected = true; + } else { + if (this.arrLayerStyles[i].isSelected === true) { + this.arrLayerStyles[i].isSelected = false; + } + } + } + this.selectedStyleIndex = styleIndex; + this._storedStyleIndex = styleIndex; + } + + + /* // Next, update this.styleRepetition.selectedIndexes. if (styleIndex !== false) { @@ -744,6 +761,9 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleDeleteStyleClick: { value: function(event) { + if (event.target.classList.contains("disabled")) { + return; + } this.deleteStyle(); } }, diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss index 8f8881dd..5220d0f1 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -274,10 +274,10 @@ .content-style .item-template { display: none; } +.style-row { + height: 20px; +} .content-style .layout-row.selected .layout-cell { background-color: $color-panel-hilite-bg; color: $color-panel-hilite-text; } -.style-row { - height: 20px; -} diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 185c9bb0..5c1c9eeb 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -35,7 +35,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { return this._isSelected; }, set: function(newVal) { - //console.log("Style["+this.styleID+"].isSelected.set ", newVal) + if (newVal !== this._isSelected) { this._isSelected = newVal; this.needsDraw = true; diff --git a/js/panels/Timeline/Style.reel/css/Style.css b/js/panels/Timeline/Style.reel/css/Style.css index 0cc8a1f8..bb65b0c7 100644 --- a/js/panels/Timeline/Style.reel/css/Style.css +++ b/js/panels/Timeline/Style.reel/css/Style.css @@ -84,3 +84,15 @@ div.content-style input.nj-skinned { div.style-row .container-propvals { overflow: hidden; } + +/* line 80, ../scss/Style.scss */ +.content-style .style-row.selected { + background-color: #474747; + color: white; +} + +/* line 84, ../scss/Style.scss */ +.content-style .style-row.style-selected { + background-color: #b2b2b2; + color: #242424; +} diff --git a/js/panels/Timeline/Style.reel/scss/Style.scss b/js/panels/Timeline/Style.reel/scss/Style.scss index 3ea943d8..c5287b00 100644 --- a/js/panels/Timeline/Style.reel/scss/Style.scss +++ b/js/panels/Timeline/Style.reel/scss/Style.scss @@ -77,7 +77,11 @@ div.style-row .container-propvals { overflow: hidden; } +.content-style .style-row.selected { + background-color: $color-panel-bg; + color: $color-panel-text; +} .content-style .style-row.style-selected { - //background-color: red !important; + background-color: $color-panel-hilite-bg; + color: $color-panel-hilite-text; } - diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 9f9a747a..bb5ca036 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -919,7 +919,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { for (i = 0; i < arrLayersLength; i++) { if (this.arrLayers[i].layerData.isSelected === true) { if (arrSelectedIndexes.indexOf(i) < 0) { - console.log("TimelinePanel.selectLayers, deselecting ", i); + this.arrLayers[i].layerData.isSelected = false; this.triggerLayerBinding(i); } @@ -992,7 +992,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value: function() { var arrSelectedElements = [], i = 0, - arrLayersLength = this.arrLayers.length; + j = 0, + arrLayersLength = this.arrLayers.length, + boolDoIt = false, + arrSelectedElementsLength = 0, + arrStageIndexes = this.getSelectedLayerIndexesFromStage(), + arrStageIndexesLength = arrStageIndexes.length; // Get the selected layers for (i = 0; i < arrLayersLength; i++) { @@ -1000,9 +1005,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrSelectedElements.push(this.arrLayers[i].layerData.stageElement); } } + arrSelectedElementsLength = arrSelectedElements.length; + + // check to see if we even need to continue... + if (arrSelectedElementsLength !== arrStageIndexesLength) { + boolDoIt = true; + } else { + for (i = 0; i < arrStageIndexesLength; i++) { + if (this.currentLayersSelected.indexOf(arrStageIndexes[i]) < 0) { + boolDoIt = true; + } + } + } + + if (boolDoIt === false) { + return; + } // Select the layers, or clear the selection if none were found - if (arrSelectedElements.length > 0) { + if (arrSelectedElementsLength > 0) { this.application.ninja.selectionController.selectElements(arrSelectedElements); } else { this.application.ninja.selectionController.executeSelectElement(); -- cgit v1.2.3 From e48195d69ac08974984c8bae85b7f41a77a67adf Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 4 Jun 2012 16:37:18 -0700 Subject: Timeline: Fixes to timeline to handle document switching & breadcrumb interactions under new DOM Architecture. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 3055 ++++++++++---------- 1 file changed, 1535 insertions(+), 1520 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 6e9513f2..a5737334 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1,1521 +1,1536 @@ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; -var nj = require("js/lib/NJUtils").NJUtils; - -var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { - - hasTemplate:{ - value:true - }, - - /* === BEGIN: Models === */ - _currentDocument: { - value : null - }, - - currentDocument : { - get : function() { - return this._currentDocument; - }, - set : function(value) { - if (value === this._currentDocument) { - return; - } - - if(!this._currentDocument && value.currentView === "design") { - this.enablePanel(true); - } - - this._currentDocument = value; - - if(!value) { - this.enablePanel(false); - } else if(this._currentDocument.currentView === "design") { - this._boolCacheArrays = false; - this.clearTimelinePanel(); - this._boolCacheArrays = true; - - // Rebind the document events for the new document context - this._bindDocumentEvents(); - - // TODO: Fix the init function so that it can be called here instead of when container changes - // this.initTimelineForDocument(); - } - } - }, - - _arrLayers:{ - value:[] - }, - - arrLayers:{ - serializable:true, - get:function () { - return this._arrLayers; - }, - set:function (newVal) { - this._arrLayers = newVal; - this.needsDraw = true; - this.cacheTimeline(); - } - }, - - _temparrLayers:{ - value:[] - }, - - temparrLayers:{ - get:function () { - return this._temparrLayers; - }, - set:function (newVal) { - this._temparrLayers = newVal; - } - }, - - - _layerRepetition:{ - value:null - }, - - layerRepetition:{ - get:function () { - return this._layerRepetition; - }, - set:function (newVal) { - this._layerRepetition = newVal; - } - }, - - // Set to false to skip array caching array sets in current document - _boolCacheArrays:{ - value:true - }, - - _currentLayerNumber:{ - value:0 - }, - - currentLayerNumber:{ - get:function () { - return this._currentLayerNumber; - }, - set:function (newVal) { - if (newVal !== this._currentLayerNumber) { - this._currentLayerNumber = newVal; - this.cacheTimeline(); - } - } - }, - - _currentLayerSelected:{ - value: false - }, - currentLayerSelected:{ - get:function () { - return this._currentLayerSelected; - }, - set:function (newVal) { - this._currentLayerSelected = newVal; - this.cacheTimeline(); - } - }, - - _selectedLayerID:{ - value:false - }, - selectedLayerID:{ - get:function () { - return this._selectedLayerID; - }, - set:function (newVal) { - if (newVal === false) { - // We are clearing the timeline, so just set the value and return. - this._selectedLayerID = newVal; - return; - } - if (newVal !== this._selectedLayerID) { - var selectIndex = this.getLayerIndexByID(newVal); - this._selectedLayerID = newVal; - this._captureSelection = true; - if (this.currentLayerSelected !== false) { - this.selectLayer(selectIndex, false); - } - if (this.currentLayersSelected !== false) { - this.selectLayers(this.currentLayersSelected); - } - if ((this.currentLayersSelected === false) && (this.currentLayerSelected === false)) { - this.selectLayers([]); - } - - } - } - }, - - _currentLayersSelected:{ - value:[] - }, - currentLayersSelected:{ - get:function () { - return this._currentLayersSelected; - }, - set:function (newVal) { - this._currentLayersSelected = newVal; - this.cacheTimeline(); - } - }, - - _currentSelectedContainer: { - value: null - }, - currentSelectedContainer: { - get: function() { - return this._currentSelectedContainer; - }, - set: function(newVal) { - if(this._currentSelectedContainer !== newVal) { - this._currentSelectedContainer = newVal; - - this._boolCacheArrays = false; - this.clearTimelinePanel(); - this._boolCacheArrays = true; - - // TODO: Fix the function so that we can remove this call here. - this.initTimelineForDocument(); - } - } - }, - - _millisecondsOffset:{ - value:1000 - }, - - millisecondsOffset:{ - get:function () { - return this._millisecondsOffset; - }, - set:function (newVal) { - if (newVal !== this._millisecondsOffset) { - this._millisecondsOffset= newVal; - this.drawTimeMarkers(); - NJevent('tlZoomSlider',this); - } - } - }, - - _masterDuration:{ - value:0 - }, - - masterDuration:{ - serializable:true, - get:function () { - return this._masterDuration; - }, - set:function (val) { - this._masterDuration = val; - this.timebar.style.width = (this._masterDuration / 12) + "px"; - } - }, - - _trackRepetition:{ - value:null - }, - - trackRepetition:{ - get:function () { - return this._trackRepetition; - }, - set:function (newVal) { - this._trackRepetition = newVal; - } - }, - - _selectedKeyframes:{ - value:[] - }, - - selectedKeyframes:{ - serializable:true, - get:function () { - return this._selectedKeyframes; - }, - set:function (newVal) { - this._selectedKeyframes = newVal; - } - }, - - _selectedTweens:{ - value:[] - }, - - selectedTweens:{ - serializable:true, - get:function () { - return this._selectedTweens; - }, - set:function (newVal) { - this._selectedTweens = newVal; - } - }, - - _breadCrumbContainer:{ - value:null - }, - - breadCrumbContainer:{ - get:function () { - return this._breadCrumbContainer; - }, - set:function (value) { - if (this._breadCrumbContainer !== value) { - this._breadCrumbContainer = value; - } - } - }, - - _isLayer:{ - value:false - }, - - _firstTimeLoaded:{ - value:true - }, - - _captureSelection:{ - value:false - }, - - _openDoc:{ - value:false - }, - - timeMarkerHolder:{ - value:null - }, - _dragAndDropHelper : { - value: false - }, - _dragAndDropHelperCoords: { - value: false - }, - _dragAndDropHelperOffset : { - value: false - }, - _dragLayerID : { - value: null - }, - - layersDragged:{ - value:[], - writable:true - }, - - dragLayerID : { - get: function() { - return this._dragLayerID; - }, - set: function(newVal) { - if (newVal !== this._dragLayerID) { - this._dragLayerID = newVal; - } - } - }, - _dropLayerID : { - value: null - }, - dropLayerID : { - get: function() { - return this._dropLayerID; - }, - set: function(newVal) { - if (newVal !== this._dropLayerID) { - this._dropLayerID = newVal; - - var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), - dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), - dragLayer = this.arrLayers[dragLayerIndex]; - this.layersDragged.push(dragLayer); - this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; - - this.arrLayers.splice(dragLayerIndex, 1); - this.arrLayers.splice(dropLayerIndex, 0, dragLayer); - this.cacheTimeline(); - - // Clear for future DnD - this._dropLayerID = null; - this._dragLayerID = null; - - // Sometimes, just to be fun, the drop and dragend events don't fire. - // So just in case, set the draw routine to delete the helper. - this._deleteHelper = true; - this.needsDraw = true; - } - } - }, - _appendHelper: { - value: false - }, - _deleteHelper: { - value: false - }, - _scrollTracks: { - value: false - }, - useAbsolutePosition:{ - value:true - }, - /* === END: Models === */ - /* === BEGIN: Draw cycle === */ - prepareForDraw:{ - value:function () { - this.initTimeline(); - - // Bind drag and drop event handlers - this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); - this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); - this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); - this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); - - // Bind the handlers for the config menu - this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); - this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false); - this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false); - this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); - document.addEventListener("click", this.handleDocumentClick.bind(this), false); - - } - }, - - willDraw:{ - value:function () { - if (this._isLayer) { - this._isLayer = false; - } - } - }, - - draw: { - value: function() { - // Drag and Drop: - // Do we have a helper to append? - if (this._appendHelper === true) { - this.container_layers.appendChild(this._dragAndDropHelper); - this._appendHelper = false; - } - // Do we need to move the helper? - if (this._dragAndDropHelperCoords !== false) { - if (this._dragAndDropHelper !== null) { - this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords; - } - this._dragAndDropHelperCoords = false; - } - // Do we need to scroll the tracks? - if (this._scrollTracks !== false) { - this.layout_tracks.scrollTop = this._scrollTracks; - this._scrollTracks = false; - } - // Do we have a helper to delete? - if (this._deleteHelper === true) { - if (this._dragAndDropHelper === null) { - // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. - // Try and recover the helper so we can delete it. - var myHelper = this.container_layers.querySelector(".timeline-dnd-helper"); - if (myHelper != null) { - this._dragAndDropHelper = myHelper; - } - } - if (this._dragAndDropHelper !== null) { - // We need to delete the helper. Can we delete it from container_layers? - if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { - this.container_layers.removeChild(this._dragAndDropHelper); - this._dragAndDropHelper = null; - this._deleteHelper = false; - } - } - this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); - this.layersDragged =[]; - } - } - }, - /* === END: Draw cycle === */ - /* === BEGIN: Controllers === */ - // Create an empty layer template object with minimal defaults and return it for use - createLayerTemplate:{ - value:function () { - var returnObj = {}; - - returnObj.layerData = {}; - returnObj.layerData.layerName = null; - returnObj.layerData.layerID = null; - returnObj.layerData.isMainCollapsed = true; - returnObj.layerData.isPositionCollapsed = true; - returnObj.layerData.isTransformCollapsed = true; - returnObj.layerData.isStyleCollapsed = true; - returnObj.layerData.arrLayerStyles = []; - returnObj.layerData.arrLayerStyles = []; - returnObj.layerData.elementsList = []; - returnObj.layerData.deleted = false; - returnObj.layerData.isSelected = false; - returnObj.layerData.layerPosition = null; - returnObj.layerData.created = false; - returnObj.layerData.isTrackAnimated = false; - returnObj.layerData.currentKeyframeRule = null; - returnObj.layerData.trackPosition = 0; - returnObj.layerData.arrStyleTracks = []; - returnObj.layerData.tweens = []; - returnObj.layerData.layerTag = ""; - returnObj.layerData.isVisible = true; - returnObj.layerData.docUUID = this.application.ninja.currentDocument._uuid; - returnObj.layerData.isTrackAnimated = false; - returnObj.layerData.triggerBinding = false; - returnObj.parentElementUUID = null; - returnObj.parentElement = null; - - return returnObj; - } - }, - - // cache Timeline data in currentDocument. - cacheTimeline: { - value: function() { - // Store the timeline data in currentDocument... - 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.tllayerNumber = this.currentLayerNumber; - this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected; - this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected; - } - } - }, - // Initialize Timeline cache in currentDocument. - initTimelineCache: { - value: function() { - // 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.tllayerNumber = this.currentLayerNumber; - this.application.ninja.currentDocument.tlCurrentLayerSelected = false; - this.application.ninja.currentDocument.tlCurrentLayersSelected = false; - } - }, - - // Create an array of style objects for an element, for use - // in creating a new layer - createLayerStyles : { - value: function(ptrElement) { - // TODO: Create logic to loop through - // CSS properties on element and build - // array of layer styles for return. - // Right now this method just returns an array of one bogus style. - - var returnArray = [], - newStyle = {}, - styleID = "1@0"; // format: layerID + "@" + style counter - - /* Example new style - newStyle.styleID = styleID; - newStyle.whichView = "propval"; // Which view do we want to show, usually property/value view (see Style) - newStyle.editorProperty = "top"; // the style property - newStyle.editorValue = 0; // The current value - newStyle.ruleTweener = false; - newStyle.isSelected = false; - - returnArray.push(newStyle); - */ - - return returnArray; - - } - }, - - // Create an array of style track objects for an element, for use - // in creating a new layer - createStyleTracks : { - value: function(ptrElement) { - // TODO: Create logic to loop through - // CSS properties on element and build - // array of layer styles for return. - // Right now this method just returns an array of one bogus style. - - var returnArray = []; - - return returnArray; - - } - }, - - // Bind all document-specific events (pass in true to unbind) - _bindDocumentEvents : { - value: function(boolUnbind) { - var arrEvents = ["deleteLayerClick", - "newLayer", - "deleteLayer", - "elementAdded", - "elementsRemoved", - "elementReplaced", - "selectionChange"], - i, - arrEventsLength = arrEvents.length; - - if (boolUnbind) { - for (i = 0; i < arrEventsLength; i++) { - this.eventManager.removeEventListener(arrEvents[i], this, false); - } - } else { - for (i = 0; i < arrEventsLength; i++) { - this.eventManager.addEventListener(arrEvents[i], this, false); - } - } - } - }, - - // Initialize the timeline, runs only once when the timeline component is first loaded - initTimeline:{ - value:function () { - - // Get some selectors - this.layout_tracks = this.element.querySelector(".layout-tracks"); - this.layout_markers = this.element.querySelector(".layout_markers"); - - // Add some event handlers - this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false); - this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false); - this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); - this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); - this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); - this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); - this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); - this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); - - // Bind some bindings - Object.defineBinding(this, "currentSelectedContainer", { - boundObject:this.application.ninja, - boundObjectPropertyPath:"currentSelectedContainer", - oneway:true - }); - - // Start the panel out in disabled mode by default - // (Will be switched on later, if appropriate). - this.enablePanel(false); - - } - }, - - // Initialize the timeline for a document. - // Called when a document is opened (new or existing), or when documents are switched. - initTimelineForDocument:{ - value:function () { - - - var myIndex, - boolAlreadyInitialized = false; - this.drawTimeMarkers(); - // Document switching - // Check to see if we have saved timeline information in the currentDocument. - if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) { - //console.log('TimelinePanel.initTimelineForDocument: new Document'); - // No, we have no information stored. - // This could mean we are creating a new file, OR are opening an existing file. - - // First, initialize the caches. - this.initTimelineCache(); - this.temparrLayers = []; - - // That's all we need to do for a brand new file. - // But what if we're opening an existing document? - if (!this.application.ninja.documentController.creatingNewFile && this.application.ninja.currentDocument.currentView !== "code") { - // Opening an existing document. If it has DOM elements we need to restore their timeline info - if (this.application.ninja.currentDocument.model.documentRoot.children[0]) { - // Yes, it has DOM elements. Loop through them and create a new object for each. - for (myIndex = 0; this.application.ninja.currentDocument.model.documentRoot.children[myIndex]; myIndex++) { - this._openDoc = true; - this.restoreLayer(this.application.ninja.currentDocument.model.documentRoot.children[myIndex]); - } - } - } - - // Draw the repetition. - this.arrLayers = this.temparrLayers; - this.currentLayerNumber = this.arrLayers.length; - boolAlreadyInitialized = true; - - } else if (this.application.ninja.currentDocument.setLevel) { - //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, - storedCurrentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; - this.temparrLayers = []; - - for (myIndex = 0; parentNode.children[myIndex]; myIndex++) { - this._openDoc = true; - this.restoreLayer(parentNode.children[myIndex]); - - } - // Draw the repetition. - this.arrLayers = this.temparrLayers; - this.currentLayerNumber = storedCurrentLayerNumber; - boolAlreadyInitialized = true; - this.application.ninja.currentDocument.setLevel = false; - - - } else { - //console.log('TimelinePanel.initTimelineForDocument: else fallback'); - // we do have information stored. Use it. - var i = 0, - tlArrLayersLength = this.application.ninja.currentDocument.tlArrLayers.length; - - // We're reading from the cache, not writing to it. - this._boolCacheArrays = false; - for (i = 0; i < tlArrLayersLength; i++) { - if (this.application.ninja.currentDocument.tlArrLayers[i].layerData.isSelected === true) { - this.application.ninja.currentDocument.tlArrLayers[i].layerData._isFirstDraw = true; - } else { - this.application.ninja.currentDocument.tlArrLayers[i].layerData._isFirstDraw = false; - } - } - this.arrLayers = this.application.ninja.currentDocument.tlArrLayers; - this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; - this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected; - this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected; - - - //debugger; - if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") { -// this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; - } - - // Are we only showing animated layers? - if (this.application.ninja.currentDocument.boolShowOnlyAnimated) { - // Fake a click. - var evt = document.createEvent("MouseEvents"); - evt.initMouseEvent("click"); - this.checkable_animated.dispatchEvent(evt); - } - - // Ok, done reading from the cache. - this._boolCacheArrays = true; - - // Reset master duration - this.resetMasterDuration(); - } - } - }, - - // Clear the currently-displayed document (and its events) from the timeline. - clearTimelinePanel:{ - value:function () { - // Remove events - this._bindDocumentEvents(true); - - // Remove every event listener for every selected tween in the timeline - this.deselectTweens(); - - // Reset visual appearance - // Todo: Maybe this should be stored per document, so we can persist between document switch? - this.application.ninja.timeline.playhead.style.left = "-2px"; - this.application.ninja.timeline.playheadmarker.style.left = "0px"; - this.application.ninja.timeline.updateTimeText(0.00); - this.timebar.style.width = "0px"; - this.checkable_animated.classList.remove("checked"); - this.currentLayerNumber = 0; - this.currentLayerSelected = false; - this.currentLayersSelected = false; - this.selectedKeyframes = []; - this.selectedTweens = []; - this._captureSelection = false; - this._openDoc = false; - this.end_hottext.value = 25; - this.updateTrackContainerWidth(); - this.masterDuration = 0; - // Clear the repetitions - if (this.arrLayers.length > 0) { - this.arrLayers = []; - this.arrLayers.length = 0; - } - } - }, - - handleDocumentChange:{ - value:function () { - - } - }, - - updateTrackContainerWidth:{ - value:function () { - this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; - this.master_track.style.width = (this.end_hottext.value * 80) + "px"; - this.time_markers.style.width = (this.end_hottext.value * 80) + "px"; - if (this.timeMarkerHolder) { - this.time_markers.removeChild(this.timeMarkerHolder); - } - this.drawTimeMarkers(); - } - }, - - updateLayerScroll:{ - value:function () { - this.user_layers.scrollTop = this.layout_tracks.scrollTop; - this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; - this.playheadmarker.style.top = this.layout_tracks.scrollTop + "px"; - } - }, - - startPlayheadTracking:{ - value:function () { - this.time_markers.onmousemove = this.updatePlayhead.bind(this); - } - }, - - stopPlayheadTracking:{ - value:function () { - this.time_markers.onmousemove = null; - } - }, - - updatePlayhead:{ - value:function (event) { - var clickedPosition = event.target.offsetLeft + event.offsetX; - this.playhead.style.left = (clickedPosition - 2) + "px"; - this.playheadmarker.style.left = clickedPosition + "px"; - var currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80); - var currentMillisec = currentMillisecPerPixel * clickedPosition; - this.updateTimeText(currentMillisec); - } - }, - - handleSelectionChange:{ - value:function () { - var layerIndex, - i = 0, - j = 0, - arrLayersLength = this.arrLayers.length, - intNumSelected = this.application.ninja.selectedElements.length, - checkIndex = 0; - - this.deselectTweens(); - //console.log("TimelinePanel.handleSelectionChange") - if (intNumSelected === 0) { - this.selectLayers([]); - this.currentLayerSelected = false; - this.currentLayersSelected = false; - } - - if (intNumSelected === 1) { - this.currentLayersSelected = false; - if (this.application.ninja.selectedElements[0]) { - checkIndex = this.application.ninja.selectedElements[0].uuid; - for (i = 0; i < arrLayersLength; i++) { - var currIndex = this.arrLayers[i].layerData.elementsList[0].uuid, - layerID = this.arrLayers[i].layerData.layerID, - layerIndex = 0; - if (checkIndex === currIndex) { - layerIndex = this.getLayerIndexByID(layerID); - this._captureSelection = false; - this.selectLayer(layerIndex); - this._captureSelection = true; - } - } - } - } - - if (intNumSelected > 1) { - // Build an array of indexes of selected layers to give to the selectLayers method - var arrSelectedIndexes = []; - this.currentLayerSelected = false; - for (i = 0; i < intNumSelected; i++) { - var currentCheck = this.application.ninja.selectedElements[i].uuid; - //console.log("checking ", currentCheck); - for (j = 0; j < arrLayersLength; j++) { - //console.log(".......... ", this.arrLayers[j].layerData.elementsList[0].uuid) - if (currentCheck === this.arrLayers[j].layerData.elementsList[0].uuid) { - //console.log("...............Yes!") - arrSelectedIndexes.push(j); - } - } - } - this.selectLayers(arrSelectedIndexes); - } - } - }, - - - - selectLayers:{ - value:function (arrSelectedIndexes) { - - var i = 0, - arrLayersLength = this.arrLayers.length, - arrSelectedIndexesLength = arrSelectedIndexes.length, - userSelection = false; - - //console.log(arrSelectedIndexes); - - - if (this.selectedKeyframes) { - this.deselectTweens(); - } - - for (i = 0; i < arrLayersLength; i++) { - this.arrLayers[i].layerData.isSelected = false; - this.triggerLayerBinding(i); - } - - this.currentLayersSelected = false; - if (arrSelectedIndexesLength > 0) { - this.currentLayersSelected = []; - } - - - for (i = 0; i < arrLayersLength; i++) { - if (arrSelectedIndexes.indexOf(i) > -1) { - this.arrLayers[i].layerData.isSelected = true; - this.arrLayers[i].isSelected = true; - this.triggerLayerBinding(i); - this.currentLayersSelected.push(i); - } - } - - this.layerRepetition.selectedIndexes = arrSelectedIndexes; - - // TODO: Set up for user selection. - if (userSelection) { - if (this._captureSelection) { - - if (this.currentLayerSelected.layerData.elementsList.length >= 1) { - this.application.ninja.selectionController.selectElements(this.currentLayerSelected.layerData.elementsList); - } else { - this.application.ninja.selectionController.executeSelectElement(); - } - - } - this._captureSelection = true; - } - - // Finally, reset the master duration. - this.resetMasterDuration(); - } - }, - - deselectTweens:{ - value:function () { - for (var i = 0; i < this.selectedTweens.length; i++) { - this.selectedTweens[i].deselectTween(); - } - this.selectedTweens = null; - this.selectedTweens = new Array(); - } - }, - - timelineLeftPaneMousedown:{ - value:function (event) { - var ptrParent = nj.queryParentSelector(event.target, ".container-layer"); - if (ptrParent !== false) { - var myIndex = this.getActiveLayerIndex(); - if (myIndex !== false) { - this.selectLayer(myIndex, true); - } - - } - this._isMousedown = true; - } - }, - - timelineLeftPaneMouseup:{ - value:function (event) { - this._isMousedown = false; - } - }, - - createNewLayer:{ - value:function (object) { - var newLayerName = "", - thingToPush = this.createLayerTemplate(), - myIndex = 0, - i = 0, - arrLayersLength = this.arrLayers.length; - - // Make up a layer name. - this.currentLayerNumber = this.currentLayerNumber + 1; - newLayerName = "Layer " + this.currentLayerNumber; - - // Possibly currentLayerNumber doesn't correctly reflect the - // number of layers. Check that. - // Commented out to fix WebGL rendering bug - /*for(k = 0; k < arrLayersLength; k++){ - if(this.arrLayers[k].layerData.layerName === newLayerName){ - this.currentLayerNumber = this.currentLayerNumber + 1; - newLayerName = "Layer " + this.currentLayerNumber; - break; - } - }*/ - // We will no longer have multiple things selected, so wipe that info out - // if it isn't already gone. - this.currentLayersSelected = false; - - // thingToPush is the template we just got. Now fill it in. - thingToPush.layerData.layerName = newLayerName; - thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">"; - thingToPush.layerData.layerID = this.currentLayerNumber; - thingToPush.parentElement = this.application.ninja.currentSelectedContainer; - thingToPush.layerData.isSelected = true; - thingToPush.layerData._isFirstDraw = true; - thingToPush.layerData.created = true; - - if (this.checkable_animated.classList.contains("checked")) { - thingToPush.layerData.isVisible = false; - } - - if (this.layerRepetition.selectedIndexes) { - // There is a selected layer, so we need to splice the new layer on top of it. - myIndex = this.layerRepetition.selectedIndexes[0]; - if (typeof(myIndex) === "undefined") { - // Edge case: sometimes there's nothing selected, so this will be "undefined" - // In that case, set it to 0, the first layer. - myIndex = 0; - } - for (var i = 0; i < this.layerRepetition.selectedIndexes.length; i++) { - if (myIndex > this.layerRepetition.selectedIndexes[i]) { - myIndex = this.layerRepetition.selectedIndexes[i]; - } - } - thingToPush.layerData.layerPosition = myIndex; - thingToPush.layerData.trackPosition = myIndex; - this.arrLayers.splice(myIndex, 0, thingToPush); - } else { - thingToPush.layerData.layerPosition = myIndex; - this.arrLayers.splice(myIndex, 0, thingToPush); - - } - this.selectLayer(myIndex, false); - } - }, - - restoreLayer:{ - value:function (ele) { - - var newLayerName, thingToPush = this.createLayerTemplate(); - - this.currentLayerNumber = this.currentLayerNumber + 1; - newLayerName = "Layer " + this.currentLayerNumber; - - if(ele.dataset.storedLayerName){ - newLayerName = ele.dataset.storedLayerName; - } - thingToPush.layerData.layerName = newLayerName; - thingToPush.layerData.layerID = this.currentLayerNumber; - thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; - thingToPush.parentElement = this.application.ninja.currentSelectedContainer; - if (this.checkable_animated.classList.contains("checked")) { - thingToPush.layerData.isVisible = false; - } - // Are there styles to add? - thingToPush.layerData.arrLayerStyles = this.createLayerStyles(); - thingToPush.layerData.arrStyleTracks = this.createStyleTracks(); - - if (this._openDoc) { - thingToPush.layerData.elementsList.push(ele); - } - - this.temparrLayers.splice(0, 0, thingToPush); - thingToPush.layerData.trackPosition = this.temparrLayers.length - 1; - thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; - - this._openDoc = false; - - } - }, - - deleteLayer:{ - value:function (arrElements) { - // Only delete a selected layers. If no layers are selected, do nothing. - var i = 0, - arrLayers = document.querySelectorAll(".container-layers .container-layer"), - arrLayersLength = arrLayers.length; - - for (i = arrLayersLength -1; i >= 0; i--) { - if (arrLayers[i].classList.contains("selected")) { - this.arrLayers.splice(i, 1); - } - } - - this.currentLayerSelected = false; - this.currentLayersSelected = false; - this.resetMasterDuration(); - - - /* - var length = elements.length; - - while(length>0){ - if (this.layerRepetition.selectedIndexes.length > 0) { - // Delete the selected layer. - var myIndex = this.layerRepetition.selectedIndexes[0]; - this.arrLayers.splice(myIndex, 1); - var selectIndex = this.arrLayers.length; - this.resetMasterDuration(); - if(selectIndex>0){ - this.selectLayer(selectIndex-1); - } - length--; - } - } - */ - } - }, - - resetMasterDuration:{ - value:function(){ - var trackDuration = 0