From 4046fca0daee6e064ee5c67bd0826ac42af7718d Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 19 Jun 2012 10:12:49 -0700 Subject: Locked Elements. Layer Controls Signed-off-by: Kruti Shah --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 6 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 76 ++++++++++++++++++++++ 2 files changed, 81 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 9e2bacd5..eac361a8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -35,7 +35,9 @@ "container_tracks" : {"#" : "container-tracks"}, "timeline_disabler" : {"#" : "timeline-disabler"}, "checkable_animated" : {"#" : "checkable_animated"}, - "tl_configbutton" : {"#" : "tl-configbutton"} + "tl_configbutton" : {"#" : "tl-configbutton"}, + "checkable_lock" : {"#" : "checkable_lock"}, + "checkable_visible":{"#" : "checkable_visible"} } }, @@ -178,6 +180,8 @@
Show only animated layers
+
Lock Layers
+
Visibility of Layers
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 339ca5a4..1ef57b13 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -580,6 +580,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Bind the handlers for the config menu this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); + this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); + this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false); document.addEventListener("click", this.handleDocumentClick.bind(this), false); this.addPropertyChangeListener("currentDocument.model.domContainer", this); @@ -1395,6 +1397,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData._isFirstDraw = true; thingToPush.layerData.created = true; thingToPush.layerData.stageElement = object; + thingToPush.layerData.isLock = false; + thingToPush.layerData.isHidden = false; + if (this.checkable_animated.classList.contains("checked")) { thingToPush.layerData.isVisible = false; @@ -1712,6 +1717,77 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + handleLockLayerClick:{ + value:function(event){ + + var arrLayersLength = this.arrLayers.length; + console.log(this.application.ninja.currentDocument) + debugger; + var lockElementArrLength = this.application.ninja.currentDocument.lockedElements.length; + var i = 0; + + if(event.currentTarget.classList.contains("checked")){ + event.currentTarget.classList.remove("checked"); + for(i=0;i --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 1ef57b13..87e7bd2e 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1119,6 +1119,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Deselect selected layers if they're not in arrSelectedIndexes. for (i = 0; i < arrLayersLength; i++) { + + debugger; + if([i]===arrSelectedIndexes){ + if(this.arrLayers[i].layerData.isLock){ + this.arrLayers[i].layerData.isSelected = false; + }else{ + this.arrLayers[i].layerData.isSelected = true; + } + }else{ + this.arrLayers[i].layerData.isSelected = false; + } if (this.arrLayers[i].layerData.isSelected === true) { if (arrSelectedIndexes.indexOf(i) < 0) { -- cgit v1.2.3 From bd46eee87a4f84871169546c10795678131f9ed9 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 19 Jun 2012 10:56:14 -0700 Subject: Lock Elements Signed-off-by: Kruti Shah --- js/panels/Timeline/Layer.reel/Layer.js | 106 +++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 0abd97be..f6d75dca 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -368,6 +368,41 @@ var Layer = exports.Layer = Montage.create(Component, { this.layerData.isVisible = value; } }, + + _isLock:{ + value: false + }, + + isLock:{ + get:function(){ + return this._isLock; + }, + set:function(value){ + if (this._isLock !== value) { + this._isLock = value; + + } + this.layerData.isLock = value; + } + }, + + _isHidden:{ + value: false + }, + + isHidden:{ + get:function(){ + return this._isHidden; + }, + set:function(value){ + if (this._isHidden !== value) { + this._isHidden = value; + + } + this.layerData._isHidden = value; + } + }, + _justAdded: { value: false @@ -1223,6 +1258,77 @@ var Layer = exports.Layer = Montage.create(Component, { } }, + handleLayerLock: { + value: function() { + var i = 0; + var arrlength = this.application.ninja.timeline.arrLayers.length; + var lockElementArrLength = this.application.ninja.currentDocument.lockedElements.length; + if(!this.layerData.isLock){ + for(i = 0; i < arrlength; i++){ + if(this.application.ninja.timeline.arrLayers[i].layerData.isLock){ + this.application.ninja.timeline.arrLayers[i].layerData.isLock = false; + this.application.ninja.timeline.arrLayers[i].layerData.isSelected = false; + for(var k = 0; k < lockElementArrLength; k++){ + if(this.application.ninja.currentDocument.lockedElements[k] === this.application.ninja.timeline.arrLayers[i].layerData.elementsList[0]){ + this.application.ninja.currentDocument.lockedElements.splice(k,1); + break; + } + } + } + } + this.layerData.isSelected = false; + this.application.ninja.timeline.selectLayers([]); + this.application.ninja.currentDocument.lockedElements.push(this.layerData.elementsList[0]); + } else { + this.layerData.isSelected = true; + for(k = 0; k --- js/panels/Timeline/Layer.reel/Layer.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index f6d75dca..970f2b65 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -543,6 +543,8 @@ var Layer = exports.Layer = Montage.create(Component, { this.docUUID = this.layerData.docUUID; this.selectedStyleIndex = this.layerData.selectedStyleIndex; this.needsDraw = boolNeedsDraw; + this.isLock = this.layerData.isLock; + this.isHidden = this.layerData.isHidden; } }, @@ -590,6 +592,8 @@ var Layer = exports.Layer = Montage.create(Component, { this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); + this.layerLock.addEventListener("click",this.handleLayerLock.bind(this),false); + this.visibilityButton.addEventListener("click",this.handleLayerVisibility.bind(this),false); // Add event listeners to add and delete style buttons this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false); -- cgit v1.2.3 From a822b95a035715e21d994f6a4c96c3e784107bea Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 19 Jun 2012 15:34:35 -0700 Subject: LockedElements - Layers Signed-off-by: Kruti Shah --- js/panels/Timeline/Layer.reel/Layer.html | 8 ++- js/panels/Timeline/Layer.reel/Layer.js | 71 +++++++++++----------- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 35 ++++------- 3 files changed, 54 insertions(+), 60 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 3648cbbb..5ee50491 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -27,7 +27,9 @@ "topControl": {"@" : "dtext_position_y"}, "widthControl": {"@" : "dtext_scale_x"}, "heightControl": {"@" : "dtext_scale_y"}, - "styleType":{"@" : "style"} + "styleType":{"@" : "style"}, + "layerLock":{"#" : "layerLock"}, + "visibilityButton":{"#" : "visibilityButton"} } }, "dtext1" : { @@ -262,8 +264,8 @@ Label -
-
+
+
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 970f2b65..776d5ec8 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -1263,39 +1263,40 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleLayerLock: { - value: function() { - var i = 0; - var arrlength = this.application.ninja.timeline.arrLayers.length; - var lockElementArrLength = this.application.ninja.currentDocument.lockedElements.length; - if(!this.layerData.isLock){ - for(i = 0; i < arrlength; i++){ - if(this.application.ninja.timeline.arrLayers[i].layerData.isLock){ - this.application.ninja.timeline.arrLayers[i].layerData.isLock = false; - this.application.ninja.timeline.arrLayers[i].layerData.isSelected = false; - for(var k = 0; k < lockElementArrLength; k++){ - if(this.application.ninja.currentDocument.lockedElements[k] === this.application.ninja.timeline.arrLayers[i].layerData.elementsList[0]){ - this.application.ninja.currentDocument.lockedElements.splice(k,1); - break; - } + value: function() { + var i = 0; + var arrlength = this.application.ninja.timeline.arrLayers.length; + var lockElementArrLength = this.application.ninja.currentDocument.lockedElements.length; + if(!this.layerData.isLock){ + for(i = 0; i < arrlength; i++){ + if(this.application.ninja.timeline.arrLayers[i].layerData.isLock){ + this.application.ninja.timeline.arrLayers[i].layerData.isLock = false; + this.application.ninja.timeline.arrLayers[i].layerData.isSelected = false; + for(var k = 0; k < lockElementArrLength; k++){ + if(this.application.ninja.currentDocument.lockedElements[k] === this.application.ninja.timeline.arrLayers[i].layerData.stageElement){ + this.application.ninja.currentDocument.lockedElements.splice(k,1); + break; } } - } - this.layerData.isSelected = false; - this.application.ninja.timeline.selectLayers([]); - this.application.ninja.currentDocument.lockedElements.push(this.layerData.elementsList[0]); - } else { - this.layerData.isSelected = true; - for(k = 0; k -1) { - this.arrLayers[i].layerData.isSelected = true; - this.arrLayers[i].isSelected = true; - this.triggerLayerBinding(i); - arrSelectedLayers.push(i); - arrCurrentElementsSelected.push(this.arrLayers[i].layerData.stageElement); + if(!this.arrLayers[i].layerData.isLock){ + this.arrLayers[i].layerData.isSelected = true; + this.arrLayers[i].isSelected = true; + this.triggerLayerBinding(i); + arrSelectedLayers.push(i); + arrCurrentElementsSelected.push(this.arrLayers[i].layerData.stageElement); + }else{ + this.arrLayers[i].layerData.isSelected = false; + this.triggerLayerBinding(i); + } } } @@ -1732,8 +1726,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function(event){ var arrLayersLength = this.arrLayers.length; - console.log(this.application.ninja.currentDocument) - debugger; var lockElementArrLength = this.application.ninja.currentDocument.lockedElements.length; var i = 0; @@ -1767,7 +1759,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleLayerVisibleClick:{ value:function(event){ - var arrLayersLength = this.arrLayers.length; var lockElementArrLength = this.application.ninja.currentDocument.lockedElements.length; var i = 0; @@ -1776,7 +1767,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { event.currentTarget.classList.remove("checked"); for(i = 0; i < arrLayersLength; i++){ this.arrLayers[i].layerData.isHidden = false; - this.arrLayers[i].layerData.elementsList[0].style.visibility = "visible"; + this.arrLayers[i].layerData.stageElement.style.visibility = "visible"; for(var k=0;k --- .../TimelinePanel.reel/TimelinePanel.js.orig | 2115 -------------------- 1 file changed, 2115 deletions(-) delete mode 100644 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js.orig (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js.orig b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js.orig deleted file mode 100644 index 59263fc3..00000000 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js.orig +++ /dev/null @@ -1,2115 +0,0 @@ -/* - 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, - Component = require("montage/ui/component").Component, - nj = require("js/lib/NJUtils").NJUtils, - EasingMenuPopup = require("js/panels/Timeline/EasingMenu.reel").EasingMenu; - -var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { - - user_layers: { - value: null, - serializable: true - }, - - track_container: { - value: null, - serializable: true - }, - - timeline_leftpane: { - value: null, - serializable: true - }, - - layer_tracks: { - value: null, - serializable: true - }, - - master_track: { - value: null, - serializable: true - }, - - time_markers: { - value: null, - serializable: true - }, - - playhead: { - value: null, - serializable: true - }, - - playheadmarker: { - value: null, - serializable: true - }, - - timetext: { - value: null, - serializable: true - }, - - timebar: { - value: null, - serializable: true - }, - - container_tracks: { - value: null, - serializable: true - }, - - end_hottext: { - value: null, - serializable: true - }, - - container_layers: { - value: null, - serializable: true - }, - - timeline_disabler: { - value: null, - serializable: true - }, - - checkable_relative: { - value: null, - serializable: true - }, - - checkable_absolute: { - value: null, - serializable: true - }, - - checkable_animated: { - value: null, - serializable: true - }, - - tl_configbutton: { - value: null, - serializable: true - }, - - - - /* === BEGIN: Models === */ - _currentDocument: { - value : null - }, - - currentDocument : { - get : function() { - return this._currentDocument; - }, - set : function(value) { - // If it's the same document, do nothing. - if (value === this._currentDocument) { - return; - } - - if(!this._currentDocument && value.currentView === "design") { - this.enablePanel(true); - } - - this._currentDocument = value; - - if(!value) { - this._boolCacheArrays = false; - this.clearTimelinePanel(); - this._boolCacheArrays = true; - 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(); - - // Initialize the timeline for the document. - this.initTimelineForDocument(); - } - } - }, - - handleChange: { - value: function() { - if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) { - this.currentSelectedContainer = this.currentDocument.model.getProperty("domContainer"); - } - } - }, - - _currentSelectedContainer: { - value: null - }, - currentSelectedContainer: { - get: function() { - return this._currentSelectedContainer; - }, - set: function(newVal) { - if(this._currentSelectedContainer !== newVal) { - this._currentSelectedContainer = newVal; - if (this._ignoreNextContainerChange === true) { - this._ignoreNextContainerChange = false; - return; - } - this.application.ninja.currentDocument.setLevel = true; - - if(this._currentDocument.currentView === "design") { - this._boolCacheArrays = false; - this.clearTimelinePanel(); - this._boolCacheArrays = true; - - // Rebind the document events for the new document context - this._bindDocumentEvents(); - - // Initialize the timeline for the document. - 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; - } - }, - - _areTracksScrolling: { - value: false - }, - - _currentOpenSpanMenu: { - value: false - }, - currentOpenSpanMenu: { - get: function() { - return this._currentOpenSpanMenu; - }, - set: function(newVal) { - this._currentOpenSpanMenu = newVal; - } - }, - - // Set to false to skip array caching array sets in currentDocument - _boolCacheArrays:{ - value:true - }, - - // Current layer number: iterated and used to assign layer IDs. - _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(); - } - }, - _currentElementsSelected: { - value: [] - }, - currentElementsSelected: { - get: function() { - return this._currentElementsSelected; - }, - set: function(newVal) { - this._currentElementsSelected = newVal; - this.cacheTimeline(); - } - }, - - _currentLayersSelected:{ - value:[] - }, - currentLayersSelected:{ - get:function () { - return this._currentLayersSelected; - }, - set:function (newVal) { - this._currentLayersSelected = newVal; - this.cacheTimeline(); - } - }, - - _easingMenu: { - value: null - }, - easingMenu: { - serializable: true, - get: function() { - return this._easingMenu; - }, - set: function(newVal) { - this._easingMenu = newVal; - } - }, - - // The index of the last layer that was clicked on - // (used for shift-click multiselect) - _lastLayerClicked : { - value: 0 - }, - lastLayerClicked: { - serializable: true, - get: function() { - return this._lastLayerClicked; - }, - set: function(newVal) { - this._lastLayerClicked = newVal - } - }, - - _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; - var intDur = Math.round(val/12), - strWidth = intDur + "px"; - this.timebar.style.width = strWidth; - } - }, - - _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; - } - } - }, - - _firstTimeLoaded:{ - value:true - }, - - _captureSelection:{ - value:false - }, - - _openDoc:{ - value:false - }, - - timeMarkerHolder:{ - value:null - }, - - // Drag and Drop properties - _dragAndDropHelper : { - value: false - }, - _dragAndDropHelperCoords: { - value: false - }, - _dragAndDropHelperOffset : { - value: false - }, - _dragLayerID : { - value: null - }, - _draggingType: { - value: false - }, - draggingType: { - get: function() { - return this._draggingType; - }, - set: function(newVal) { - this._draggingType = newVal; - } - }, - - _elementsDragged: { - value: [] - }, - elementsDragged: { - get: function() { - return this._elementsDragged; - }, - set: function(newVal) { - this._elementsDragged = newVal; - } - }, - - 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 dropLayerIndex = this.getLayerIndexByID(newVal), - i = 0, - dragLayerIndexesLength = this.currentLayersSelected.length, - dragAndDropDirection = 0, - targetIndex; - - if (dragLayerIndexesLength === 0) { - // Nothing was dragged, so do nothing. - return; - } - - // Is this a move up or down? - if (this.currentLayersSelected[0] > dropLayerIndex) { - 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") { - this._layerDroppedInPlace = this.arrLayers[targetIndex].layerData.stageElement; - } else { - this._layerDroppedInPlace = null; - } - - // 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); - } - this.elementsDragged = this.currentElementsSelected; - - // Cache the new info - this.cacheTimeline(); - - // Clear drag and drop variables for future re-use - this._dropLayerID = null; - this.lastLayerClicked = 0; - - // 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._needsDOMManipulation = true; - this.needsDraw = true; - } - } - }, - _needsDOMManipulation: { - value: false - }, - _appendHelper: { - value: false - }, - _deleteHelper: { - value: false - }, - _scrollTracks: { - value: false - }, - - // Keyframe drag and drop properties - _draggingTrackId: { - value: false - }, - draggingTrackId: { - get: function() { - return this._draggingTrackId; - }, - set: function(newVal) { - this._draggingTrackId = newVal; - } - }, - - - useAbsolutePosition:{ - value:true - }, - _currentDocumentUuid: { - value: false - }, - _ignoreSelectionChanges: { - value: false - }, - // is the control key currently being pressed (used for multiselect) - _isControlPressed: { - value: false - }, - - // is the shift key currently being pressed (used for multiselect) - _isShiftPressed: { - value: false - }, - /* === END: Models === */ - - /* === BEGIN: Draw cycle === */ - prepareForDraw:{ - value:function () { - this.initTimeline(); - -<<<<<<< HEAD - // 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.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); - this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); - this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false); - document.addEventListener("click", this.handleDocumentClick.bind(this), false); - - this.addPropertyChangeListener("currentDocument.model.domContainer", this); - - // Bind some bindings - Object.defineBinding(this, "currentSelectedContainer", { - boundObject:this.application.ninja, - boundObjectPropertyPath:"currentSelectedContainer", - oneway:true - }); - - // Create the easing menu for future use. - this.easingMenu = EasingMenuPopup; - //this.easingMenu.show(); - -======= ->>>>>>> refs/heads/TimelineUberJD - } - }, - - draw:{ - value: function() { - - // Drag and Drop: - if (this.draggingType === "layer") { - - // 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; - } - } - - - } - } else if (this.draggingType === "keyframe") { - // Do we need to scroll the tracks? - if (this._scrollTracks !== false) { - this.layout_tracks.scrollLeft = this._scrollTracks; - this._scrollTracks = false; - } - } - - // Do we need to scroll the layers? - if (this._areTracksScrolling) { - this._areTracksScrolling = false; - 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"; - } - - // Do we need to manipulate the DOM? - if (this._needsDOMManipulation === true) { - this.application.ninja.elementMediator.reArrangeDOM(this.elementsDragged , this._layerDroppedInPlace); - this.elementsDragged =[]; - } - } - }, - - didDraw: { - value: function() { - if (this._needsDOMManipulation === true) { - this._needsDOMManipulation = false; - // We have shuffled layers, so we need to update this.selectedLayers. - this.selectLayers([]) - } - } - }, - - /* === 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.stageElement = null; - returnObj.layerData.isMainCollapsed = true; - returnObj.layerData.isPositionCollapsed = true; - returnObj.layerData.isTransformCollapsed = true; - returnObj.layerData.isStyleCollapsed = true; - 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.arrPositionTracks = []; - 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() { - if (typeof(this.application.ninja) === "undefined") { - return; - } - // Store the timeline data in currentDocument... - if (this._boolCacheArrays) { - // ... but only if we're supposed to. - if(this.currentDocument) { - 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; - } - this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected; - } - } - }, - // 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.currentDocument.model.domContainer; - this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; - this.application.ninja.currentDocument.tlCurrentLayerSelected = false; - this.application.ninja.currentDocument.tlCurrentLayersSelected = false; - this.application.ninja.currentDocument.tlCurrentElementsSelected = []; - this.application.ninja.currentDocument.lockedElements = []; - } - }, - - // 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"], - 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"); - - - // 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); - - // 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); - this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); - this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); - - // Bind the handlers for the config menu - this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); - this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); - 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.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); - document.addEventListener("keydown", this.timelineLeftPaneKeydown.bind(this), false); - document.addEventListener("keyup", this.timelineLeftPaneKeyup.bind(this), false); - this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false); - - // Bind some bindings - Object.defineBinding(this, "currentSelectedContainer", { - boundObject:this.application.ninja, - boundObjectPropertyPath:"currentSelectedContainer", - oneway:true - }); - this.addPropertyChangeListener("currentDocument.model.domContainer", this); - - // Start the panel out in disabled mode by default - // (Will be switched on later, if appropriate). - this.enablePanel(false); - - // Create the easing menu for future use. - this.easingMenu = EasingMenuPopup; - } - }, - - // 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. - - // 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; - this._ignoreNextContainerChange = true; - 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. - // Get the current selection and restore timeline info for its children. - var parentNode = this.currentDocument.model.domContainer, - 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; - 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; - - - this._ignoreNextContainerChange = true; - - // We're reading from the cache, not writing to it. - this._boolCacheArrays = false; - - // We are about to redraw the layers and tracks for the first time, so they need to go through their - // respective firstDraw routines. - for (i = 0; i < tlArrLayersLength; i++) { - this.application.ninja.currentDocument.tlArrLayers[i].layerData._isFirstDraw = true; - } - 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; - - // 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 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 = []; - this.