From a7570091c3b02ae22d2a1c1410747022a1dffd46 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 2 Jul 2012 17:00:20 -0700 Subject: Timeline: Bug fix IKNINJA-1792, Cut pasting multiple selected objects throws error on console. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 129 ++++++++++++--------- 1 file changed, 74 insertions(+), 55 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 7deaf0d1..1df37636 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -239,6 +239,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + _lastInsertionIndex: { + value: false + }, + lastInsertionIndex: { + get: function() { + return this._lastInsertionIndex; + }, + set: function(newVal) { + this._lastInsertionIndex = newVal; + } + }, + _areTracksScrolling: { value: false }, @@ -1504,65 +1516,59 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, - createstageElement:{ - value:function (object) { - var stageElementName = "", - thingToPush = this.createLayerTemplate(), - myIndex = 0, - i = 0, - arrLayersLength = this.arrLayers.length; - // Make up a layer name. - this.currentLayerNumber = this.currentLayerNumber + 1; -// stageElementName = "Layer " + this.currentLayerNumber; - stageElementName=" "; - - // 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 === stageElementName){ - this.currentLayerNumber = this.currentLayerNumber + 1; - stageElementName = "Layer " + this.currentLayerNumber; - break; - } - }*/ + + createStageElementsAt: { + value:function (isPaste, arrElements) { + + var i = 0, + j = 0, + arrElementsLength = arrElements.length, + arrNewLayers = [], + arrNewLayersLength = 0, + stageElementName = "", + targetIndex = 0; + if (this.lastInsertionIndex !== false) { + targetIndex = this.lastInsertionIndex; + this.lastInsertionIndex = false; + } + // 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 = stageElementName; - thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">"; - thingToPush.layerData.layerID = this.currentLayerNumber; - thingToPush.parentElement = this.currentDocument.model.domContainer; - thingToPush.layerData.isSelected = true; - thingToPush.layerData._isFirstDraw = true; - thingToPush.layerData.created = true; - thingToPush.layerData.stageElement = object; - thingToPush.layerData.isLock = false; - thingToPush.layerData.isHidden = false; + for (i = arrElementsLength-1; i >= 0; i--) { + var thingToPush = this.createLayerTemplate(); + + // Make up a layer name. + this.currentLayerNumber = this.currentLayerNumber + 1; + stageElementName=""; + + // thingToPush is the template we just got. Now fill it in. + thingToPush.layerData.layerName = stageElementName; + thingToPush.layerData.layerTag = "<" + arrElements[i].nodeName.toLowerCase() + ">"; + thingToPush.layerData.layerID = this.currentLayerNumber; + thingToPush.parentElement = this.currentDocument.model.domContainer; + thingToPush.layerData.isSelected = true; + thingToPush.layerData._isFirstDraw = true; + thingToPush.layerData.created = true; + thingToPush.layerData.stageElement = arrElements[i]; + thingToPush.layerData.isLock = false; + thingToPush.layerData.isHidden = false; + thingToPush.layerData.created = !isPaste; + thingToPush.created = !isPaste; + + if (this.checkable_animated.classList.contains("checked")) { + thingToPush.layerData.isVisible = false; + } + //arrNewLayers.push(thingToPush); + this.arrLayers.splice(targetIndex, 0, thingToPush); + } + //console.log(arrNewLayers); + //console.log(thingToPush); + + //this.arrLayers.splice(targetIndex, 0, arrNewLayers); - if (this.checkable_animated.classList.contains("checked")) { - thingToPush.layerData.isVisible = false; - } - - // Determine where the new array should be inserted in arrLayers. - // Ordinarily we could use this.getInsertionIndex BUT the new element - // insertion and selection has already fired, so getInsertionIndex will return - // incorrect info. So we need to look at the DOM. - var childrenLength = this.application.ninja.currentDocument.model.domContainer.children.length, - newIndex = childrenLength -1; - for (i = 0; i < childrenLength; i++) { - var currTest = this.application.ninja.currentDocument.model.domContainer.children[i]; - if (object == currTest) { - myIndex = newIndex - i; - } - } - - this.arrLayers.splice(myIndex, 0, thingToPush); - this.selectLayers([myIndex]); } }, @@ -1647,8 +1653,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleElementAdded:{ - value:function() { - this.createstageElement(this.application.ninja.selectedElements[0]); + value:function(event) { + var i = 0, + targetIndex = 0; + // One or more elements have been added to the stage. + // We need to add them to the timeline. + if (typeof(event.detail.length) === "undefined") { + // This is a standard element creation event. + this.createStageElementsAt(false, [event.detail]); + } else { + // This is a paste action, because event.detail has more than one item in it. + this.createStageElementsAt(true, event.detail); + } } }, @@ -1750,9 +1766,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrLayersLength = this.arrLayers.length, returnVal = arrLayersLength -1; if (returnVal === -1) { + this.lastInsertionIndex = 0; return false; } if (this.currentLayersSelected === false) { + this.lastInsertionIndex = 0; return false; } @@ -1761,6 +1779,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { returnVal = i; } } + this.lastInsertionIndex = returnVal; return returnVal; } }, -- cgit v1.2.3 From 8c087f7c13a2bd72e1640e99e339a74fc2250901 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Jul 2012 15:47:50 -0700 Subject: Timeline: First pass at cleaning up TimelineTrack code. Changes propagated to PropertyTrack, TimelineTrack, and Tween classes. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1198 ++++++++++---------- 1 file changed, 592 insertions(+), 606 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 1df37636..17372935 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -11,103 +11,244 @@ var Montage = require("montage/core/core").Montage, var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { + /* === BEGIN: Models === */ + _user_layers: { + value: null + }, user_layers: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._user_layers; + }, + set: function(newVal) { + this._user_layers = newVal; + } }, + _track_container: { + value: null + }, track_container: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._track_container; + }, + set: function(newVal) { + this._track_container = newVal; + } }, + _timeline_leftpane: { + value: null + }, timeline_leftpane: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._timeline_leftpane; + }, + set: function(newVal) { + this._timeline_leftpane = newVal; + } }, + _layer_tracks: { + value: null + }, layer_tracks: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._layer_tracks; + }, + set: function(newVal) { + this._layer_tracks = newVal; + } }, + _master_track: { + value: null + }, master_track: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._master_track; + }, + set: function(newVal) { + this._master_track = newVal; + } }, + _time_markers: { + value: null + }, time_markers: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._time_markers; + }, + set: function(newVal) { + this._time_markers = newVal; + } }, + _playhead: { + value: null + }, playhead: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._playhead; + }, + set: function(newVal) { + this._playhead = newVal; + } }, + _playheadmarker: { + value: null + }, playheadmarker: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._playheadmarker; + }, + set: function(newVal) { + this._playheadmarker = newVal; + } }, + _timetext: { + value: null + }, timetext: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._timetext; + }, + set: function(newVal) { + this._timetext = newVal; + } }, + _timebar: { + value: null + }, timebar: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._timebar; + }, + set: function(newVal) { + this._timebar = newVal; + } }, + _container_tracks: { + value: null + }, container_tracks: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._container_tracks; + }, + set: function(newVal) { + this._container_tracks = newVal; + } }, + _end_hottext: { + value: null + }, end_hottext: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._end_hottext; + }, + set: function(newVal) { + this._end_hottext = newVal; + } }, + _container_layers: { + value: null + }, container_layers: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._container_layers; + }, + set: function(newVal) { + this._container_layers = newVal; + } }, + _timeline_disabler: { + value: null + }, timeline_disabler: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._timeline_disabler; + }, + set: function(newVal) { + this._timeline_disabler = newVal; + } }, + _checkable_relative: { + value: null + }, checkable_relative: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._checkable_relative; + }, + set: function(newVal) { + this._checkable_relative = newVal; + } }, + _checkable_absolute: { + value: null + }, checkable_absolute: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._checkable_absolute; + }, + set: function(newVal) { + this._checkable_absolute = newVal; + } }, + _checkable_animated: { + value: null + }, checkable_animated: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._checkable_animated; + }, + set: function(newVal) { + this._checkable_animated = newVal; + } }, + _tl_configbutton: { + value: null + }, tl_configbutton: { - value: null, - serializable: true + serializable: true, + get: function() { + return this._tl_configbutton; + }, + set: function(newVal) { + this._tl_configbutton = newVal; + } }, - - - /* === BEGIN: Models === */ _currentDocument: { value : null }, - currentDocument : { get : function() { return this._currentDocument; @@ -157,14 +298,6 @@ 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 }, @@ -199,7 +332,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _arrLayers:{ value:[] }, - arrLayers:{ serializable:true, get:function () { @@ -215,7 +347,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _temparrLayers:{ value:[] }, - temparrLayers:{ get:function () { return this._temparrLayers; @@ -229,7 +360,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _layerRepetition:{ value:null }, - layerRepetition:{ get:function () { return this._layerRepetition; @@ -280,7 +410,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _currentLayerNumber:{ value:0 }, - currentLayerNumber:{ get:function () { return this._currentLayerNumber; @@ -293,18 +422,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - _currentLayerSelected:{ - value: false - }, - currentLayerSelected:{ - get:function () { - return this._currentLayerSelected; - }, - set:function (newVal) { - this._currentLayerSelected = newVal; - this.cacheTimeline(); - } - }, _currentElementsSelected: { value: [] }, @@ -362,7 +479,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _millisecondsOffset:{ value:1000 }, - millisecondsOffset:{ get:function () { return this._millisecondsOffset; @@ -379,7 +495,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _masterDuration:{ value:0 }, - masterDuration:{ serializable:true, get:function () { @@ -396,7 +511,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _trackRepetition:{ value:null }, - trackRepetition:{ get:function () { return this._trackRepetition; @@ -409,7 +523,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _selectedKeyframes:{ value:[] }, - selectedKeyframes:{ serializable:true, get:function () { @@ -423,7 +536,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _selectedTweens:{ value:[] }, - selectedTweens:{ serializable:true, get:function () { @@ -437,7 +549,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _breadCrumbContainer:{ value:null }, - breadCrumbContainer:{ get:function () { return this._breadCrumbContainer; @@ -469,15 +580,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _dragAndDropHelper : { value: false }, + _dragAndDropHelperCoords: { value: false }, + _dragAndDropHelperOffset : { value: false }, - _dragLayerID : { - value: null - }, + _draggingType: { value: false }, @@ -502,6 +613,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + _dragLayerID : { + value: null + }, dragLayerID : { get: function() { return this._dragLayerID; @@ -540,8 +654,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { dragAndDropDirection = -1; } targetIndex = dropLayerIndex + dragAndDropDirection; - - // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? // Get the target DOM element. if (typeof(this.arrLayers[targetIndex]) !== "undefined") { @@ -553,7 +665,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Splice for (i = 0; i < dragLayerIndexesLength; i++) { var myDraggingLayer = this.arrLayers[this.currentLayersSelected[i]]; - // Splice arrLayers this.arrLayers.splice(this.currentLayersSelected[i], 1); this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); } @@ -574,15 +685,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, + _needsDOMManipulation: { value: false }, + _appendHelper: { value: false }, + _deleteHelper: { value: false }, + _scrollTracks: { value: false }, @@ -600,16 +715,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - useAbsolutePosition:{ value:true }, + _currentDocumentUuid: { value: false }, + _ignoreSelectionChanges: { value: false }, + // is the control key currently being pressed (used for multiselect) _isControlPressed: { value: false @@ -619,6 +736,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _isShiftPressed: { value: false }, + + // Hack to ignore extra container change event during document switching. + _ignoreNextContainerChange: { + value: true + }, /* === END: Models === */ /* === BEGIN: Draw cycle === */ @@ -706,8 +828,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Do we need to scroll the layers? if (this._areTracksCollapsing !== false) { - //console.log("diddraw: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop); - //this.layout_tracks.scrollTop = this.user_layers.scrollTop;\ this.layout_tracks.scrollTop = this._areTracksCollapsing; this._areTracksCollapsing = false; } @@ -715,6 +835,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, /* === END: Draw cycle === */ + /* === BEGIN: Controllers === */ // Create an empty layer template object with minimal defaults and return it for use createLayerTemplate:{ @@ -770,7 +891,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; 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; for (i = 0; i < hashLength; i++ ) { if (this.application.ninja.currentDocument.tlBreadcrumbHash[i].containerUuid === this.currentDocument.model.domContainer.uuid) { @@ -789,6 +909,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, + // Initialize Timeline cache in currentDocument. initTimelineCache: { value: function() { @@ -805,62 +926,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - // 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 = [ "stageElement", - "deleteLayer", - "elementAdded", - "elementsRemoved", - "elementReplaced", - "selectionChange"], - */ var arrEvents = ["elementAdded", "elementsRemoved", "selectionChange"], @@ -887,12 +955,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.layout_tracks = this.element.querySelector(".layout-tracks"); this.layout_markers = this.element.querySelector(".layout_markers"); - - // Bind the event handler for the document change events - //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false); + // Bind the event handler for the document close 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); @@ -908,12 +972,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { document.addEventListener("click", this.handleDocumentClick.bind(this), false); // Add some event handlers - this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false); - //this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.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.timeline_leftpane.addEventListener("click", this.handleTimelineLeftPanelClick.bind(this), false); + this.layout_tracks.addEventListener("scroll", this.handleLayerScroll.bind(this), false); + this.user_layers.addEventListener("scroll", this.handleLayerScroll.bind(this), false); + this.end_hottext.addEventListener("changing", this.handleTrackContainerWidthChange.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); @@ -923,7 +985,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false); this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false); - this.addPropertyChangeListener("currentDocument.model.domContainer", this); // Start the panel out in disabled mode by default @@ -937,19 +998,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Initialize the timeline for a document. // Called when a document is opened (new or existing), or when documents are switched. - _ignoreNextContainerChange: { - value: true - }, initTimelineForDocument:{ value:function () { var myIndex; this.drawTimeMarkers(); + // Document switching // Check to see if we have saved timeline information in the currentDocument. - // console.log("TimelinePanel.initTimelineForDocument"); - 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. @@ -977,9 +1033,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._currentDocumentUuid = this.application.ninja.currentDocument.uuid; } else if (this.application.ninja.currentDocument.setLevel) { - // console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick'); // Information stored, but we're moving up or down in the breadcrumb. - var i = 0, hash = this.application.ninja.currentDocument.tlBreadcrumbHash, hashLength = hash.length, @@ -996,7 +1050,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } - // Possibly nothing was in the hash, so check and if so fall back to old restoreLayer method. + // Possibly nothing was in the hash, fall back to old restoreLayer method. if (boolHashed === false) { for (myIndex = 0; parentNode.children[myIndex]; myIndex++) { this._openDoc = true; @@ -1011,12 +1065,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.resetMasterDuration(); } else { - // console.log('TimelinePanel.initTimelineForDocument: else fallback'); // we do have information stored. Use it. var i = 0, tlArrLayersLength = this.application.ninja.currentDocument.tlArrLayers.length; - + // Hack to ignore next container change event this._ignoreNextContainerChange = true; // We're reading from the cache, not writing to it. @@ -1029,14 +1082,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } 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.currentDocument.model.domContainer = this.application.ninja.currentDocument.tlCurrentSelectedContainer; - } this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected; this._currentDocumentUuid = this.application.ninja.currentDocument.uuid; @@ -1067,14 +1113,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.deselectTweens(); // Reset visual appearance - // TODO: Maybe playhead position 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.currentElementsSelected = []; this.selectedKeyframes = []; @@ -1082,7 +1126,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._captureSelection = false; this._openDoc = false; this.end_hottext.value = 25; - this.updateTrackContainerWidth(); + this.handleTrackContainerWidthChange(); + // Clear the repetitions if (this.arrLayers.length > 0) { this.arrLayers = []; @@ -1091,130 +1136,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.resetMasterDuration(); } }, - - handleDocumentChange:{ - value:function () { - - } - }, - - handlePlayButtonClick:{ - value:function(ev){ - this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview; - - if (this.application.ninja.appModel.livePreview) { - this.play_button.classList.remove("playbutton"); - this.play_button.classList.add("pausebutton"); - - } else { - this.play_button.classList.remove("pausebutton"); - this.play_button.classList.add("playbutton"); - } - } - }, - - handleKeyframeShortcut:{ - value:function(action){ - var tempEv = {}; - tempEv.offsetX = this.playheadmarker.offsetLeft; - tempEv.actionType = action; - - if (this.currentLayersSelected === false) { - // oops, we do not have a layer selected. We should growl at the user. For now, this will fail silently. - return; - } - - // Okay. We need to get the correct layer(s). For each currentElementSelected, - // loop through trackRepetition.childComponents and compare to stageElement. - // If they match, that's one of the components that needs the event. - var i = 0, - j = 0, - currentElementsSelectedLength = this.currentElementsSelected.length, - trackRepLength = this.trackRepetition.childComponents.length, - arrTargetIndexes = [], - arrTargetIndexesLength = 0; - - - for (i = 0; i < trackRepLength; i++) { - var currentElement = this.trackRepetition.childComponents[i].stageElement; - for (j = 0; j < currentElementsSelectedLength; j++) { - if (currentElement === this.currentElementsSelected[j]) { - arrTargetIndexes.push(i); - } - } - } - arrTargetIndexesLength = arrTargetIndexes.length; - - // Now we have an array of things that need to handle the event. - for (i = 0; i < arrTargetIndexesLength; i++) { - this.trackRepetition.childComponents[arrTargetIndexes[i]].handleKeyboardShortcut(tempEv); - } - } - }, - - 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(); - } - }, synchScrollbars: { value: function(intScrollBy) { - //this.updateLayerScroll(); - //this.user_layers.scrollTop = 0; - //this.layout_tracks.scrollTop = this.user_layers.scrollTop; - //console.log("synch: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop); this._areTracksCollapsing = this.layout_tracks.scrollTop - intScrollBy; this.needsDraw = true; - } }, - updateLayerScroll:{ - value:function () { - //console.log("TimelinePanel.updateLayerScroll") - this._areTracksScrolling = true; - this.needsDraw = true; - - } - }, - - 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); - } - }, - - // Event handler for changes in stage selection. - handleSelectionChange: { - value:function (event) { - this.updateLayerSelection(); - } - }, - // Select the layers whose indexes are passed in as arrSelectedIndexes. // Pass in an empty array to clear all selections. selectLayers:{ @@ -1372,152 +1301,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - timelineLeftPanelMousedown: { - value:function (event) { - var ptrParent = nj.queryParentSelector(event.target, ".container-layer"), - i = 0, - arrLayers = document.querySelectorAll(".container-layer"), - arrLayersLength = arrLayers.length, - targetIndex = 0, - isAlreadySelected = false, - indexAlreadySelected = -5, - indexLastClicked = 0, - ua = navigator.userAgent.toLowerCase(), - boolCommandControlKeyIsPressed = false; - - // Check to see if either the Command key (macs) or Control key (windows) is being pressed - if (ua.indexOf("mac") > -1) { - if (event.metaKey === true) { - boolCommandControlKeyIsPressed = true; - } - } else { - if (this._isControlPressed === true) { - boolCommandControlKeyIsPressed = true; - } - } - - - // Did the mousedown event originate within a layer? - if (ptrParent === false) { - // No it did not. Do nothing. - return; - } - - // Get the targetIndex, the index in the arrLayers of the - // layer that was just clicked on - for (i = 0; i < arrLayersLength; i++) { - if (arrLayers[i] == ptrParent) { - targetIndex = i; - } - } - - // Did we just click on a layer that's already selected? - if (this.currentLayersSelected !== false) { - for (i = 0; i < this.currentLayersSelected.length; i++) { - if (this.currentLayersSelected[i] === targetIndex) { - indexAlreadySelected = i; - } - } - } - if (indexAlreadySelected > -1) { - isAlreadySelected = true; - } - - // Now, do the selection based on all of that information. - if (this.currentLayersSelected.length === 0) { - // Nothing selected yet, so just push the new index into the array. - this.currentLayersSelected.push(targetIndex); - } else { - // Something is already selected. What do do depends on whether - // or not other keys are pressed. - if (boolCommandControlKeyIsPressed === true) { - // Control or Command key is being pressed, so we need to - // either add the current layer to selectedLayers - // or remove it if it's already there. - if (this.currentLayersSelected === false) { - this.currentLayersSelected = []; - } - if (isAlreadySelected === false) { - this.currentLayersSelected.push(targetIndex); - } else { - this.currentLayersSelected.splice(indexAlreadySelected, 1); - } - this.lastLayerClicked = targetIndex; - } else if (this._isShiftPressed === true) { - // The shift key is being pressed. - // Start by selecting the lastLayerClicked - if (this.currentLayersSelected === false) { - this.currentLayersSelected = []; - //this.currentLayerSelected = false; - } - this.currentLayersSelected = [this.lastLayerClicked]; - // Add all the layers between lastLayerClicked and targetIndex - if (targetIndex > this.lastLayerClicked) { - for (i = this.lastLayerClicked+1; i <= targetIndex; i++) { - this.currentLayersSelected.push(i); - } - } else if (targetIndex < this.lastLayerClicked) { - for (i = targetIndex; i < this.lastLayerClicked; i++) { - this.currentLayersSelected.push(i); - } - } - } else { - // No key is pressed, so just select the element - // and update lastLayerClicked - this.currentLayersSelected = [targetIndex]; - this.lastLayerClicked = targetIndex; - } - } - this.selectLayers(this.currentLayersSelected); - this.updateStageSelection(); - } - }, - - timelineLeftPaneKeydown: { - value: function(event) { - var ua = navigator.userAgent.toLowerCase(), - boolIsMac = false; - if (ua.indexOf("mac") > -1) { - boolIsMac = true; - } - if (event.keyCode === 16) { - // Shift key has been pressed - this._isShiftPressed = true; - } - if ((event.keyCode === 17) && !boolIsMac) { - // Control key has been pressed - this._isControlPressed = true; - } - /* - if (event.metaKey === true) { - this._isControlPressed = true; - } - */ - } - }, - - timelineLeftPaneKeyup: { - value: function(event) { - var ua = navigator.userAgent.toLowerCase(), - boolIsMac = false; - if (ua.indexOf("mac") > -1) { - boolIsMac = true; - } - if (event.keyCode === 16) { - // Shift key has been released - this._isShiftPressed = false; - } - if ((event.keyCode === 17) && !boolIsMac) { - // Control key has been released - this._isControlPressed = false; - } - if (event.metaKey === false) { - this._isControlPressed = false; - } - } - }, - - createStageElementsAt: { value:function (isPaste, arrElements) { @@ -1561,14 +1344,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (this.checkable_animated.classList.contains("checked")) { thingToPush.layerData.isVisible = false; } - //arrNewLayers.push(thingToPush); this.arrLayers.splice(targetIndex, 0, thingToPush); } - //console.log(arrNewLayers); - //console.log(thingToPush); - - //this.arrLayers.splice(targetIndex, 0, arrNewLayers); - } }, @@ -1578,11 +1355,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush = this.createLayerTemplate(); this.currentLayerNumber = this.currentLayerNumber + 1; -// stageElementName = "Layer " + this.currentLayerNumber; -// if(ele.dataset.storedLayerName){ -// stageElementName = ele.dataset.storedLayerName; -// } if(ele.id){ thingToPush.layerData.layerName = ele.id; } @@ -1590,16 +1363,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; thingToPush.parentElement = this.currentDocument.model.domContainer; if (this._openDoc) { - //thingToPush.layerData.elementsList.push(ele); thingToPush.layerData.stageElement = ele; } 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(); + // Initialize arrays for styles and their associated tracks; + // These will be filled (if necessary) in TimelineTrack. + thingToPush.layerData.arrLayerStyles = []; + thingToPush.layerData.arrStyleTracks = []; // Add the layer to the repetition this.temparrLayers.splice(0, 0, thingToPush); @@ -1607,7 +1380,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; this._openDoc = false; - } }, @@ -1652,39 +1424,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - handleElementAdded:{ - value:function(event) { - var i = 0, - targetIndex = 0; - // One or more elements have been added to the stage. - // We need to add them to the timeline. - if (typeof(event.detail.length) === "undefined") { - // This is a standard element creation event. - this.createStageElementsAt(false, [event.detail]); - } else { - // This is a paste action, because event.detail has more than one item in it. - this.createStageElementsAt(true, event.detail); - } - } - }, - - handleElementsRemoved:{ - value:function (event) { - this.deleteLayers(event.detail); - } - }, - - handleElementReplaced:{ - value:function(event){ - // TODO: this needs to be updated. Not sure when an elementReplaced event will be fired? - /* - this.currentLayerSelected.layerData.elementsList.pop(); - this.currentLayerSelected.layerData.elementsList.push(event.detail.data.newChild); - this.currentLayerSelected.layerData.animatedElement = event.detail.data.newChild; - */ - } - }, - drawTimeMarkers:{ value:function () { this.timeMarkerHolder = document.createElement("div"); @@ -1746,16 +1485,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - selectLayer:{ - value:function (layerIndex, userSelection) { - //console.log("=----> Please update this component to use TimelinePanel.selectLayers. See this message for syntax. <----="); - this.selectLayers([layerIndex]); - if (userSelection === true) { - this.updateStageSelection(); - } - } - }, - // Get the index where a layer should be inserted based on selection. // If nothing is selected, returns false. // Used by ElementController.addElement. @@ -1819,46 +1548,380 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, - handleConfigButtonClick: { - value: function(event) { - event.stopPropagation(); - this.handleCheckableClick(event); - - } - }, - handleDocumentClick: { - value: function(event) { - if (this.tl_configbutton.classList.contains("checked")) { - this.tl_configbutton.classList.remove("checked"); - } - // - if (this.currentOpenSpanMenu !== false) { - this.currentOpenSpanMenu.hideEasingMenu(); - this.currentOpenSpanMenu = false; + + buildDragHelper: { + value: function() { + var myContainer = document.createElement("div"), + i = 0, + currentLayersSelectedLength = this.currentLayersSelected.length; + + for (i = 0; i < currentLayersSelectedLength; i++) { + var currentClone = this.layerRepetition.childComponents[this.currentLayersSelected[i]].element.cloneNode(true); + currentClone.classList.add("layerSelected"); + myContainer.appendChild(currentClone); } + + this._dragAndDropHelper = myContainer; + this._dragAndDropHelper.style.opacity = 0.8; + this._dragAndDropHelper.style.position = "absolute"; + this._dragAndDropHelper.style.top = "0px"; + this._dragAndDropHelper.style.left = "0px"; + this._dragAndDropHelper.style.zIndex = 700; + + this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width"); + this._dragAndDropHelper.classList.add("timeline-dnd-helper"); } }, - - handleAnimatedClick: { - value: function(event) { - if (typeof(this.application.ninja.currentDocument) === "undefined") { - return; - } - if (this.application.ninja.currentDocument == null) { - return; - } - this.handleCheckableClick(event); - this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked"); - var boolHide = false, - i = 0, - arrLayersLength = this.arrLayers.length; - if (event.currentTarget.classList.contains("checked")) { - // Hide layers with isAnimated = false; - boolHide = true; - } - - for (i = 0; i < arrLayersLength; i++) { - if (boolHide) { + + // Trigger the layer/track data binding + triggerLayerBinding : { + value: function(intIndex) { + this.arrLayers[intIndex].layerData.triggerBinding = !this.arrLayers[intIndex].layerData.triggerBinding; + } + }, + + getActiveLayerIndex: { + value: function() { + var i = 0, + returnVal = false, + arrLayersLength = this.arrLayers.length; + for (i = 0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerData.isSelected === true) { + returnVal = i; + } + } + return returnVal; + } + }, + /* === END: Controllers === */ + + /* === BEGIN: Event Handlers === */ + handleChange: { + value: function() { + if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) { + this.currentSelectedContainer = this.currentDocument.model.getProperty("domContainer"); + } + } + }, + + handleDocumentChange:{ + value:function () { + + } + }, + + handlePlayButtonClick:{ + value:function(ev){ + this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview; + + if (this.application.ninja.appModel.livePreview) { + this.play_button.classList.remove("playbutton"); + this.play_button.classList.add("pausebutton"); + + } else { + this.play_button.classList.remove("pausebutton"); + this.play_button.classList.add("playbutton"); + } + } + }, + + handleKeyframeShortcut:{ + value:function(action){ + var tempEv = {}; + tempEv.offsetX = this.playheadmarker.offsetLeft; + tempEv.actionType = action; + + if (this.currentLayersSelected === false) { + // we do not have a layer selected. We should growl at the user. For now, this will fail silently. + return; + } + + // We need to get the correct layer(s). For each currentElementSelected, + // loop through trackRepetition.childComponents and compare to stageElement. + // If they match, that's one of the components that needs the event. + var i = 0, + j = 0, + currentElementsSelectedLength = this.currentElementsSelected.length, + trackRepLength = this.trackRepetition.childComponents.length, + arrTargetIndexes = [], + arrTargetIndexesLength = 0; + + + for (i = 0; i < trackRepLength; i++) { + var currentElement = this.trackRepetition.childComponents[i].stageElement; + for (j = 0; j < currentElementsSelectedLength; j++) { + if (currentElement === this.currentElementsSelected[j]) { + arrTargetIndexes.push(i); + } + } + } + arrTargetIndexesLength = arrTargetIndexes.length; + + // Now we have an array of things that need to handle the event. + for (i = 0; i < arrTargetIndexesLength; i++) { + this.trackRepetition.childComponents[arrTargetIndexes[i]].handleKeyboardShortcut(tempEv); + } + } + }, + + handleTrackContainerWidthChange:{ + 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(); + } + }, + + handleLayerScroll: { + value:function () { + this._areTracksScrolling = true; + this.needsDraw = true; + + } + }, + + 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); + } + }, + + // Event handler for changes in stage selection. + handleSelectionChange: { + value:function (event) { + this.updateLayerSelection(); + } + }, + + handleTimelineLeftPanelClick: { + value:function (event) { + var ptrParent = nj.queryParentSelector(event.target, ".container-layer"), + i = 0, + arrLayers = document.querySelectorAll(".container-layer"), + arrLayersLength = arrLayers.length, + targetIndex = 0, + isAlreadySelected = false, + indexAlreadySelected = -5, + indexLastClicked = 0, + ua = navigator.userAgent.toLowerCase(), + boolCommandControlKeyIsPressed = false; + + // Check to see if either the Command key (macs) or Control key (windows) is being pressed + if (ua.indexOf("mac") > -1) { + if (event.metaKey === true) { + boolCommandControlKeyIsPressed = true; + } + } else { + if (this._isControlPressed === true) { + boolCommandControlKeyIsPressed = true; + } + } + + + // Did the mousedown event originate within a layer? + if (ptrParent === false) { + // No it did not. Do nothing. + return; + } + + // Get the targetIndex, the index in the arrLayers of the + // layer that was just clicked on + for (i = 0; i < arrLayersLength; i++) { + if (arrLayers[i] == ptrParent) { + targetIndex = i; + } + } + + // Did we just click on a layer that's already selected? + if (this.currentLayersSelected !== false) { + for (i = 0; i < this.currentLayersSelected.length; i++) { + if (this.currentLayersSelected[i] === targetIndex) { + indexAlreadySelected = i; + } + } + } + if (indexAlreadySelected > -1) { + isAlreadySelected = true; + } + + // Now, do the selection based on all of that information. + if (this.currentLayersSelected.length === 0) { + // Nothing selected yet, so just push the new index into the array. + this.currentLayersSelected.push(targetIndex); + } else { + // Something is already selected. What do do depends on whether + // or not other keys are pressed. + if (boolCommandControlKeyIsPressed === true) { + // Control or Command key is being pressed, so we need to + // either add the current layer to selectedLayers + // or remove it if it's already there. + if (this.currentLayersSelected === false) { + this.currentLayersSelected = []; + } + if (isAlreadySelected === false) { + this.currentLayersSelected.push(targetIndex); + } else { + this.currentLayersSelected.splice(indexAlreadySelected, 1); + } + this.lastLayerClicked = targetIndex; + } else if (this._isShiftPressed === true) { + // The shift key is being pressed. + // Start by selecting the lastLayerClicked + if (this.currentLayersSelected === false) { + this.currentLayersSelected = []; + } + this.currentLayersSelected = [this.lastLayerClicked]; + // Add all the layers between lastLayerClicked and targetIndex + if (targetIndex > this.lastLayerClicked) { + for (i = this.lastLayerClicked+1; i <= targetIndex; i++) { + this.currentLayersSelected.push(i); + } + } else if (targetIndex < this.lastLayerClicked) { + for (i = targetIndex; i < this.lastLayerClicked; i++) { + this.currentLayersSelected.push(i); + } + } + } else { + // No key is pressed, so just select the element + // and update lastLayerClicked + this.currentLayersSelected = [targetIndex]; + this.lastLayerClicked = targetIndex; + } + } + this.selectLayers(this.currentLayersSelected); + this.updateStageSelection(); + } + }, + + timelineLeftPaneKeydown: { + value: function(event) { + var ua = navigator.userAgent.toLowerCase(), + boolIsMac = false; + if (ua.indexOf("mac") > -1) { + boolIsMac = true; + } + if (event.keyCode === 16) { + // Shift key has been pressed + this._isShiftPressed = true; + } + if ((event.keyCode === 17) && !boolIsMac) { + // Control key has been pressed + this._isControlPressed = true; + } + } + }, + + timelineLeftPaneKeyup: { + value: function(event) { + var ua = navigator.userAgent.toLowerCase(), + boolIsMac = false; + if (ua.indexOf("mac") > -1) { + boolIsMac = true; + } + if (event.keyCode === 16) { + // Shift key has been released + this._isShiftPressed = false; + } + if ((event.keyCode === 17) && !boolIsMac) { + // Control key has been released + this._isControlPressed = false; + } + if (event.metaKey === false) { + this._isControlPressed = false; + } + } + }, + + handleElementAdded:{ + value:function(event) { + var i = 0, + targetIndex = 0; + // One or more elements have been added to the stage. + // We need to add them to the timeline. + if (typeof(event.detail.length) === "undefined") { + // This is a standard element creation event. + this.createStageElementsAt(false, [event.detail]); + } else { + // This is a paste action, because event.detail has more than one item in it. + this.createStageElementsAt(true, event.detail); + } + } + }, + + handleElementsRemoved:{ + value:function (event) { + this.deleteLayers(event.detail); + } + }, + + handleElementReplaced:{ + value:function(event){ + // TODO: Is this event even fired? It's in element-controller. + } + }, + + handleConfigButtonClick: { + value: function(event) { + event.stopPropagation(); + this.handleCheckableClick(event); + + } + }, + + handleDocumentClick: { + value: function(event) { + if (this.tl_configbutton.classList.contains("checked")) { + this.tl_configbutton.classList.remove("checked"); + } + // + if (this.currentOpenSpanMenu !== false) { + this.currentOpenSpanMenu.hideEasingMenu(); + this.currentOpenSpanMenu = false; + } + } + }, + + handleAnimatedClick: { + value: function(event) { + if (typeof(this.application.ninja.currentDocument) === "undefined") { + return; + } + if (this.application.ninja.currentDocument == null) { + return; + } + this.handleCheckableClick(event); + this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked"); + var boolHide = false, + i = 0, + arrLayersLength = this.arrLayers.length; + if (event.currentTarget.classList.contains("checked")) { + // Hide layers with isAnimated = false; + boolHide = true; + } + + for (i = 0; i < arrLayersLength; i++) { + if (boolHide) { // Hide layers with isAnimated = false if (this.arrLayers[i].layerData.isTrackAnimated === false) { this.arrLayers[i].layerData.isVisible = false; @@ -1872,6 +1935,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + handleCheckableClick: { value: function(event) { if (event.currentTarget.classList.contains("checked")) { @@ -1967,14 +2031,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - // Trigger the layer/track data binding - triggerLayerBinding : { - value: function(intIndex) { - this.arrLayers[intIndex].layerData.triggerBinding = !this.arrLayers[intIndex].layerData.triggerBinding; - } - }, - - /* Layer drag and drop */ handleLayerDragStart : { value: function(event) { @@ -2008,33 +2064,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - buildDragHelper: { - value: function() { - var myContainer = document.createElement("div"), - i = 0, - currentLayersSelectedLength = this.currentLayersSelected.length; - - for (i = 0; i < currentLayersSelectedLength; i++) { - var currentClone = this.layerRepetition.childComponents[this.currentLayersSelected[i]].element.cloneNode(true); - currentClone.classList.add("layerSelected"); - myContainer.appendChild(currentClone); - } - - this._dragAndDropHelper = myContainer; - this._dragAndDropHelper.style.opacity = 0.8; - this._dragAndDropHelper.style.position = "absolute"; - this._dragAndDropHelper.style.top = "0px"; - this._dragAndDropHelper.style.left = "0px"; - this._dragAndDropHelper.style.zIndex = 700; - - this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width"); - this._dragAndDropHelper.classList.add("timeline-dnd-helper"); - } - }, - handleLayerDragover: { value: function(event) { - // If this isn't a layer event we don't do anything. if (this.draggingType !== "layer") { return; @@ -2059,9 +2090,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.needsDraw = true; } }, + handleLayerDragEnd : { value: function(event) { - // If this isn't a layer event we don't do anything. if (this.draggingType !== "layer") { return; @@ -2071,9 +2102,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + handleLayerDrop : { value: function(event) { - // If this isn't a layer event we don't do anything. if (this.draggingType !== "layer") { return; @@ -2088,7 +2119,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { /* Keyframe drag and drop */ handleKeyframeDragover: { value: function(event) { - // If this isn't a keyframe drag and drop event, we don't want to do anything. if (this.draggingType !== "keyframe") { return; @@ -2122,9 +2152,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return false; } }, + handleKeyframeDrop: { value: function(event) { - // If this isn't a keyframe drop event, we don't want to do anything. if (this.draggingType !== "keyframe") { return; @@ -2178,51 +2208,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } return false; } - }, - - getActiveLayerIndex: { - value: function() { - var i = 0, - returnVal = false, - arrLayersLength = this.arrLayers.length; - for (i = 0; i < arrLayersLength; i++) { - if (this.arrLayers[i].layerData.isSelected === true) { - returnVal = i; - } - } - return returnVal;