From a39bad832722a10f6556f91e94c3301a41f59bd5 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 13:30:49 -0800 Subject: merge new timeline Signed-off-by: Jonathan Duran --- .../Timeline/TimelinePanel.reel/TimelinePanel.css | 6 - .../Timeline/TimelinePanel.reel/TimelinePanel.html | 230 +++++++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 615 +++++++++++++-------- .../TimelinePanel.reel/css/TimelinePanel.css | 249 +++++++++ .../Timeline/TimelinePanel.reel/images/pause.png | Bin 0 -> 1076 bytes .../Timeline/TimelinePanel.reel/images/play.png | Bin 0 -> 1190 bytes .../TimelinePanel.reel/images/play_next.png | Bin 0 -> 1185 bytes .../TimelinePanel.reel/images/play_prev.png | Bin 0 -> 1199 bytes .../Timeline/TimelinePanel.reel/images/plus.png | Bin 0 -> 1133 bytes .../TimelinePanel.reel/images/timetick.jpg | Bin 0 -> 737 bytes .../Timeline/TimelinePanel.reel/images/trash.png | Bin 0 -> 1154 bytes 11 files changed, 847 insertions(+), 253 deletions(-) delete mode 100644 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css create mode 100644 js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/pause.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_next.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_prev.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/plus.png create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/trash.png (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css deleted file mode 100644 index 7f1b0f7f..00000000 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css +++ /dev/null @@ -1,6 +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. - */ - diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 6849898b..35f348c7 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -1,32 +1,224 @@ - - + + + + { + "owner": { + "module": "js/panels/Timeline/TimelinePanel.reel", + "name": "TimelinePanel", + "properties": { + "element": {"#": "timeline_panel"}, + "user_layers": {"#": "user_layers"}, + "track_container": {"#": "right_inside"}, + "layer_tracks": {"#": "layer_tracks"}, + "master_track": {"#": "master_track"}, + "newlayer_button": {"#": "newlayer_button"}, + "deletelayer_button": {"#": "deletelayer_button"}, + "time_markers" : {"#": "timeline_markers"}, + "layerRepetition" : {"@": "repetition1"}, + "trackRepetition" : {"@" : "repetition2"}, + "playhead": {"#": "playhead"}, + "playheadmarker": {"#": "playhead_marker"}, + "timetext" : {"#": "time_text"} + } + }, + "timelineResize" : { + "module": "js/panels/Resizer", + "name": "Resizer", + "properties": { + "element": {"#": "layer_resizer"}, + "panel" : {"#" : "timeline_leftpane"}, + "isVertical" : false, + "isInversed" : false + } + }, + + + "repetition1": { + "module": "montage/ui/repetition.reel", + "name": "Repetition", + "properties": { + "element": {"#": "container-layers"}, + "isSelectionEnabled" : true + }, + "bindings": { + "objects": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "arrLayers", + "oneway": false + } + } + }, + "layer" : { + "module" : "js/panels/Timeline/Layer.reel", + "name" : "Layer", + "properties" : { + "element": {"#": "container-layer"} + }, + "bindings" : { + "layerName" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.layerName", + "oneway" : false + }, + "layerID" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.layerID", + "oneway" : false + }, + "arrLayerStyles" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.arrLayerStyles", + "oneway" : false + }, + "isMainCollapsed" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed", + "oneway" : false + }, + "isPositionCollapsed" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isPositionCollapsed", + "oneway" : false + }, + "isTransformCollapsed" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", + "oneway" : false + }, + "isStyleCollapsed" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", + "oneway" : false + } + } + }, + + "repetition2" : { + "module": "montage/ui/repetition.reel", + "name": "Repetition", + "properties": { + "element": {"#": "container-tracks"}, + "isSelectionEnabled" : false + }, + "bindings": { + "objects": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "arrTracks", + "oneway": false + } + } + }, + "track" : { + "module" : "js/panels/Timeline/TimelineTrack.reel", + "name" : "TimelineTrack", + "properties" : { + "element": {"#": "container-track"} + }, + "bindings" : { + "trackID" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.trackID", + "oneway" : false + }, + "tweens" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.tweens", + "oneway" : false + }, + "isMainCollapsed" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed", + "oneway" : false + }, + "isPositionCollapsed" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isPositionCollapsed", + "oneway" : false + }, + "isTransformCollapsed" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", + "oneway" : false + }, + "isStyleCollapsed" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", + "oneway" : false + } + } + } + } + -
- +
+ + + +
+ + +
+
+
+
+
+
+
+
+
00:00:00
+
+
+ + + +
+
Master Layer
+
+
+
+
+ +
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ +
+
+
+ +
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 9bf51e60..45899648 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1,295 +1,454 @@ -/* -This file contains proprietary software owned by Motorola Mobility, Inc.
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
-(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; -var TimelineController = require("js/panels/Timeline/TimelineController").TimelineController; +var Layer = require("js/panels/Timeline/Layer.reel").Layer; +var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; +// var Track = require("js/panels/Timeline/Track.reel").Track; var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { - tmpImg: { value: null}, + hasTemplate: { + value: true + }, + + /* === BEGIN: Models === */ + + // Layer models: arrays for the data and repetition, current layer number, + _arrLayers : { + value: [] + }, + arrLayers: { + get: function() { + return this._arrLayers; + }, + set: function(newVal) { + this._arrLayers = newVal; + } + }, + + _layerRepetition: { + value: null + }, + layerRepetition: { + get: function() { + return this._layerRepetition; + }, + set: function(newVal) { + this._layerRepetition = newVal; + } + }, + + currentLayerNumber:{ + value:0 + }, - templateDidLoad: { - value: function() { - /* - this.tmpImg = document.createElement("img"); - this.tmpImg.width = 1879; - this.tmpImg.height = 440; - this.tmpImg.src = "images/timeline/timeline.png"; - */ - } + millisecondsOffset:{ + value:5000 }, - prepareForDraw: { - value: function() { - this.element.style.background = "url('images/timeline/timeline.png')"; - this.element.style.width = "100%"; - this.element.style.height = "400px"; - this.element.style.backgroundPosition = "-5px -40px"; - } + // Track model + _arrTracks: { + serializable: true, + value: [] + }, + arrTracks: { + serializable: true, + get: function() { + return this._arrTracks; + }, + set: function(newVal) { + this._arrTracks = newVal; + } + }, + _trackRepetition: { + serializable: true, + value: null + }, + trackRepetition : { + serializable: true, + get: function() { + return this._trackRepetition; + }, + set: function(newVal) { + this._trackRepetition = newVal; + } }, - init : { - value : function() - { - this.buildTimelineView(); + _selectedKeyframes:{ + value:[] + }, + selectedKeyframes:{ + serializable: true, + get: function() { + return this._selectedKeyframes; + }, + set: function(value){ + this._selectedKeyframes = value; } }, - breadCrumbContainer:{ - value:null, - writable:true, - enumerable:true - }, - controlsContainer:{ - value:null, - writable:true, - enumerable:true - }, + /* === END: Models === */ + + /* === BEGIN: Draw cycle === */ - timelineGutter:{ - value:null, - writable:true, - enumerable:true - }, + prepareForDraw: { + value: function() { - userLayerContainer:{ - value:null, - writable:true, - enumerable:true - }, + this.eventManager.addEventListener("deleteLayerClick", this, false); + this.eventManager.addEventListener("newLayer", this, false); + this.eventManager.addEventListener("deleteLayer", this, false); - currentLayerNumber:{ - value:1, - writable:true, - enumerable:true + this.initTimelineView(); + } }, - - newLayerButton:{ - value:null, - writable:true, - enumerable:true + _isLayer: { + value: false }, - deleteLayerButton:{ - value:null, - writable:true, - enumerable:true + willDraw: { + value: function() { + if (this._isLayer) { + + this.insertLayer(); + this._isLayer = false; + } + } }, - newFolderButton:{ - value:null, - writable:true, - enumerable:true - }, - buildTimelineView : { - value:function(){ - var timeline = document.getElementById("timelinePanel"); - - var mainTimelineContainer = document.createElement("div"); - mainTimelineContainer.style.backgroundColor = "#000000"; - mainTimelineContainer.style.width = "100%"; - mainTimelineContainer.style.height = "100%"; - mainTimelineContainer.style.overflow = "visible"; - - timeline.appendChild(mainTimelineContainer); - - this.breadCrumbContainer = document.createElement("div"); - this.breadCrumbContainer.style.width = "100%"; - this.breadCrumbContainer.style.height = "20px"; - this.breadCrumbContainer.style.backgroundColor = "#111111"; - - var timeControllerContainer = document.createElement("div"); - timeControllerContainer.style.width = "auto"; - timeControllerContainer.style.height = "20px"; - timeControllerContainer.style.backgroundColor = "#000000"; - - this.controlsContainer = document.createElement("div"); - this.controlsContainer.style.width = "200px"; - this.controlsContainer.style.height = "20px"; - this.controlsContainer.style.backgroundColor = "#440000"; - this.controlsContainer.style.float = "left"; - this.controlsContainer.innerText = "Timeline Controller"; - - var timeContainer = document.createElement("div"); - timeContainer.style.width = "inherit"; - timeContainer.style.height = "20px"; - timeContainer.style.backgroundColor = "#880000"; - timeContainer.style.float = "left"; - timeContainer.innerText = "Time markers"; - - timeControllerContainer.appendChild(this.controlsContainer); - timeControllerContainer.appendChild(timeContainer); - - var masterLayerContainer = document.createElement("div"); - masterLayerContainer.style.width = "100%"; - masterLayerContainer.style.height = "20px"; - masterLayerContainer.style.backgroundColor = "#111111"; - masterLayerContainer.style.border = "solid"; - masterLayerContainer.style.borderWidth = "thin"; - masterLayerContainer.style.borderColor = "#333333"; - masterLayerContainer.innerText = "MASTER Layer"; - - this.userLayerContainer = document.createElement("div"); - this.userLayerContainer.style.width = "100%"; - this.userLayerContainer.style.height = "33px"; - this.userLayerContainer.style.backgroundColor = "#111111"; - - this.timelineGutter = document.createElement("div"); - this.timelineGutter.style.position = "fixed"; - //this.timelineGutter.style.width = "inherit"; - this.timelineGutter.style.height = "20px"; - //this.timelineGutter.style.bottom = 0; - this.timelineGutter.style.backgroundColor = "#000000"; - this.timelineGutter.style.zIndex = "100"; - - var newLayerButton = document.createElement("button"); - newLayerButton.style.backgroundImage = "url(../MainApp/images/timeline/plus.png)"; - newLayerButton.style.backgroundRepeat = "no-repeat"; - newLayerButton.style.height = "18px"; - newLayerButton.style.width = "18px"; - //newLayerButton.textContent = "New Layer"; - newLayerButton.addEventListener("click", this.newLayerClickHandler.bind(this), false); - - //var newFolderButton = document.createElement("button"); - //newFolderButton.textContent = "New Folder"; - - var newTrashButton = document.createElement("button"); - newTrashButton.style.backgroundImage = "url(../MainApp/images/timeline/trash.png)"; - newTrashButton.style.backgroundRepeat = "no-repeat"; - newTrashButton.style.height = "18px"; - newTrashButton.style.width = "18px"; - newTrashButton.addEventListener("click", this.deleteLayerClickHandler.bind(this), false); - - this.timelineGutter.appendChild(newLayerButton); - //this.timelineGutter.appendChild(newFolderButton); - this.timelineGutter.appendChild(newTrashButton); - - mainTimelineContainer.appendChild(this.breadCrumbContainer); - mainTimelineContainer.appendChild(timeControllerContainer); - mainTimelineContainer.appendChild(masterLayerContainer); - mainTimelineContainer.appendChild(this.userLayerContainer); - mainTimelineContainer.appendChild(this.timelineGutter); - - this.initBreadCrumb(); + + /* === END: Draw cycle === */ - this.layerArray = new Array(); + /* === BEGIN: Controllers === */ + + // Initialize the timeline + initTimelineView : { + value:function(){ + + // Get some selectors for future use + this.layout_tracks = this.layer_tracks.querySelector(".layout-tracks"); + this.layout_markers = this.element.querySelector(".layout_markers"); + + // Add event handlers on the buttons. + this.newlayer_button.identifier = "addLayer"; + this.newlayer_button.addEventListener("click", this, false); + this.deletelayer_button.identifier = "deleteLayer"; + this.deletelayer_button.addEventListener("click", this, false); + + // Simultaneous scrolling of the layer and tracks + this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); + this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); + + // Calculate and draw time markers + this.drawTimeMarkers(); + + // Default to one layer for new doc +// this.newLayer(); + NJevent('newLayer',1); + // TODO - add condition for existing doc and parse DOM for top level elements } }, - newLayerClickHandler:{ - value:function(){ - this.newLayer(); + deselectKeyframes:{ + value: function(){ + for(var i in this.selectedKeyframes){ + this.selectedKeyframes[i].deselect(); + } + this.selectedKeyframes = null; + this.selectedKeyframes = new Array(); } }, - deleteLayerClickHandler:{ + updateLayerScroll:{ value:function(){ - this.deleteLayer(); + // Link tracks and layers together for vertical scrolling + this.user_layers.scrollTop = this.layout_tracks.scrollTop; + + // Link tracks and markers together for horizontal scrolling + this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; + + // Link tracks and master track together for horizontal scrolling? + this.master_track.scrollLeft = this.layout_tracks.scrollLeft; } }, - layerArray:{ - value:null, - writable:true, - enumerable:true - }, + handleAddLayerClick:{ + value:function(event){ + event.stopPropagation(); + //this.newLayer(); + this._isLayer = true; + this.needsDraw = true; - selectedLayer:{ - value:null, - writable:true, - enumerable:true + } }, - newLayer:{ - value:function(){ - var newLayerDiv = document.createElement("div"); - newLayerDiv.style.width = "inherit"; - newLayerDiv.style.height = "20px"; - newLayerDiv.style.backgroundColor = "#222222"; - newLayerDiv.style.border = "solid"; - newLayerDiv.style.borderWidth = "thin"; - newLayerDiv.style.borderColor = "#444444"; + handleDeleteLayerClick:{ + value:function(event){ + event.stopPropagation(); +// this.deleteLayer(); + this.removeLayer() + } + }, - newLayerDiv.innerText = "Layer " + this.currentLayerNumber; - this.currentLayerNumber++; + handleNewLayer:{ + value:function(event){ + // Add a new layer. It should be added above the currently selected layer, + // Or at the end, if no layer is selected. + var newLayerName = "", + //thingToPush = Layer.create(), + thingToPush = {}, + // newTrack = TimelineTrack.create(), + newTrack = {}, + myIndex = 0; - newLayerDiv.addEventListener("click", this.selectLayer.bind(this), false); - this.userLayerContainer.appendChild(newLayerDiv); + if(event.detail._undoStatus){ - this.layerArray.push(newLayerDiv); - console.log(this.layerArray); - } - }, + this.arrLayers.splice(event.detail._layerPosition,0,event.detail._el) + this.arrTracks.splice(event.detail._layerPosition,0,event.detail._track) - selectLayer:{ - value:function(ev){ - for(var i in this.layerArray){ - this.layerArray[i].style.backgroundColor = "#222222"; } - ev.target.style.backgroundColor = "#444444"; - this.selectedLayer = ev.target; - } - }, + else{ + // Build the thingToPush object + + this.currentLayerNumber = this.currentLayerNumber +1; + newLayerName = "Layer " + this.currentLayerNumber; + thingToPush.layerName = newLayerName; + thingToPush.layerID = this.currentLayerNumber; + thingToPush.isMainCollapsed = true; + thingToPush.isPositionCollapsed = true; + thingToPush.isTransformCollapsed = true; + thingToPush.isStyleCollapsed = false; + thingToPush.arrLayerStyles = []; + + newTrack.trackID = this.currentLayerNumber; + newTrack.isMainCollapsed = true; + newTrack.isPositionCollapsed = true; + newTrack.isTransformCollapsed = true; + newTrack.isStyleCollapsed = false; + newTrack.tweens = []; + + // If a layer is selcted, splice the new layer on top + // Otherwise, just push the new layer in at the bottom. + + if (!!this.layerRepetition.selectedIndexes) { + myIndex = this.layerRepetition.selectedIndexes[0]; + this.arrLayers.splice(myIndex, 0, thingToPush); + this.layerRepetition.selectedIndexes = [myIndex]; + this._LayerUndoPosition = myIndex; + this.arrTracks.splice(myIndex, 0, newTrack); + + } else { + this.arrLayers.push(thingToPush); + this.arrTracks.push(newTrack); + this._LayerUndoPosition = this.arrLayers.length-1; + + - deleteLayer:{ - value:function(){ - if(this.selectedLayer){ - this.userLayerContainer.removeChild(this.selectedLayer); - } - for(var i in this.layerArray){ - if(this.layerArray[i] == this.selectedLayer){ - this.layerArray.splice(i,1); } + + this._LayerUndoObject = thingToPush; + this._LayerUndoIndex = thingToPush.layerID ; + this._LayerUndoStatus = true; + + this._TrackUndoObject = newTrack; + + } + + } }, - newFolder:{ + handleDeleteLayer:{ + value:function(event){ - }, + if (this.arrLayers.length > 0) { - deleteFolder:{ + if(event.detail._undoStatus){ - }, + this.arrLayers.splice(event.detail._layerPosition,1) + this.arrTracks.splice(event.detail._layerPosition,1) - initBreadCrumb : { - value:function(){ - var mainBodyButton = document.createElement("button"); - mainBodyButton.textContent = "Body"; - this.breadCrumbContainer.appendChild(mainBodyButton); - } - }, - initControlsContainer:{ - value:function(){ - // create timeline control buttons for play,stop,etc + }else{ + + if (!!this.layerRepetition.selectedIndexes) { + + var myIndex = this.layerRepetition.selectedIndexes[0]; + this._LayerUndoObject=this.arrLayers[myIndex] + this._TrackUndoObject=this.arrTracks[myIndex] + this.arrLayers.splice(myIndex, 1); + this.arrTracks.splice(myIndex, 1); + this._LayerUndoIndex = this._LayerUndoObject.layerID; + this._LayerUndoPosition = myIndex; + + } else { + this._LayerUndoPosition = this.arrLayers.length-1 + this._LayerUndoObject = this.arrLayers.pop(); + this._LayerUndoIndex = this._LayerUndoObject.layerID; + this._TrackUndoObject = this.arrTracks.pop(); + + //alert('TODO: what should happen when no layer is selected and the user clicks the delete button?') + } + + this._LayerUndoStatus = true; + } + + // TODO: actually remove the selected style from the layer. (Maybe by publishing an event?) + } } }, + drawTimeMarkers:{ value:function(){ - + var i; + var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80); + for(i=0;i