From e247f0c9bd596f0aeba6f6239ea9bd4178f5d50d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 7 Feb 2012 11:51:01 -0800 Subject: Timeline: fix linked scrolling between tracks and layers (vertical) and tracks and time markers (horizontal). --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 0dbcfa16..e0825893 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -145,6 +145,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Initialize the timeline initTimelineView : { value:function(){ + + // Get some selectors to make life easier. + this.layout_tracks = this.element.querySelector(".layout-tracks"); + this.layout_markers = this.element.querySelector(".layout_markers"); // Add event handlers on the buttons. this.newlayer_button.identifier = "addLayer"; @@ -153,7 +157,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.deletelayer_button.addEventListener("click", this, false); // Simultaneous scrolling of the layer and tracks - this.layer_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); + 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 @@ -172,8 +176,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { updateLayerScroll:{ value:function(){ - this.user_layers.scrollTop = this.layer_tracks.scrollTop; - this.master_track.scrollLeft = this.layer_tracks.scrollLeft; + console.log(this.layout_tracks.scrollLeft) + this.user_layers.scrollTop = this.layout_tracks.scrollTop; + this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; } }, -- cgit v1.2.3 From ad81fc7e75225d24ffaf59bb179a32aa12f5141a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 7 Feb 2012 18:44:06 -0800 Subject: Timeline: select/deselect layers. Work on focus/blur for layers. --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 8 ++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 81 ++++++++++++++++++++-- 2 files changed, 84 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 9ed69f4a..1785f888 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -14,6 +14,7 @@ "element": {"#": "timeline_panel"}, "user_layers": {"#": "user_layers"}, "track_container": {"#": "right_inside"}, + "timeline_leftpane" : {"#" : "timeline_leftpane"}, "layer_tracks": {"#": "layer_tracks"}, "master_track": {"#": "master_track"}, "newlayer_button": {"#": "newlayer_button"}, @@ -92,6 +93,11 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", "oneway" : false }, + "isSelected" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", + "oneway" : false + }, "isStyleCollapsed" : { "boundObject" : {"@" : "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", @@ -167,7 +173,7 @@
-
+
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index e0825893..a8934017 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -2,6 +2,7 @@ var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; var Layer = require("js/panels/Timeline/Layer.reel").Layer; var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; +var nj = require("js/lib/NJUtils").NJUtils; // var Track = require("js/panels/Timeline/Track.reel").Track; @@ -155,6 +156,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.newlayer_button.addEventListener("click", this, false); this.deletelayer_button.identifier = "deleteLayer"; this.deletelayer_button.addEventListener("click", this, false); + + // New click listener to handle select/deselect events + this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); + this.timeline_leftpane.addEventListener("blur", this.timelineLeftPanelBlur.bind(this), false); + this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false); + + // Simultaneous scrolling of the layer and tracks this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); @@ -194,7 +202,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleAddLayerClick:{ value:function(event){ - event.stopPropagation(); + //event.stopPropagation(); this._isLayer = true; this.needsDraw = true; @@ -203,7 +211,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleDeleteLayerClick:{ value:function(event){ - event.stopPropagation(); + //event.stopPropagation(); this._deleteKeyDown=false; if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ this._hashKey="123"; @@ -237,6 +245,60 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + timelineLeftPaneClick : { + value: function(event) { + // Check ALL THE CLICKS + // Are they in a particular layer? If so, we need to select that layer and + // deselect the others. + var ptrParent = nj.queryParentSelector(event.target, ".container-layer"); + if (ptrParent !== false) { + // Why yes, the click was within a layer. But which one? + var strLabel = ptrParent.querySelector(".label-layer .collapsible-label").innerText, + myIndex = 0, + i = 0, + arrLayersLength = this.arrLayers.length; + console.log(strLabel); + for (i = 0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerName === strLabel) { + myIndex = i; + this.arrLayers[i].isSelected = true; + } else { + this.arrLayers[i].isSelected = false; + } + } + } + } + }, + + timelineLeftPanelBlur: { + value: function(event) { + console.log('blur called with ' + this._skipNextBlur); + if (this._skipNextBlur === true) { + this._skipNextBlur = false; + } else { + var i = 0, + arrLayersLength = this.arrLayers.length; + for (i = 0; i < arrLayersLength; i++) { + this.arrLayers[i].isSelected = false; + } + this.layerRepetition.selectedIndexes = null; + } + } + }, + _skipNextBlur : { + value: false + }, + timelineLeftPanelMousedown : { + value: function(event) { + console.log(event.target.classList) + var ptrParent = nj.queryParentSelector(event.target, ".label-style"); + console.log('mousedown with ' + ptrParent) + if (ptrParent !== false) { + this._skipNextBlur = true; + } + } + }, + handleNewLayer:{ value:function(event){ // Add a new layer. It should be added above the currently selected layer, @@ -314,6 +376,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.arrLayerStyles = []; thingToPush.element=[]; thingToPush.deleted=false; + thingToPush.isSelected = false; thingToPush.parentElement=this.application.ninja.currentSelectedContainer; // this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid; @@ -332,14 +395,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); thingToPush.layerPosition=myIndex; + thingToPush.isSelected = true; newTrack.trackPosition=myIndex; this.arrLayers.splice(myIndex, 0, thingToPush); this.arrTracks.splice(myIndex, 0, newTrack); this.currentLayerSelected= this.arrLayers[myIndex]; + var i = 0, + arrLayersLength = this.arrLayers.length; + for (i = 0; i < arrLayersLength; i++) { + if (i === myIndex) { + this.arrLayers[i].isSelected = true; + } else { + this.arrLayers[i].isSelected = false; + } + } this.layerRepetition.selectedIndexes = [myIndex]; } else { - this.arrLayers.push(thingToPush); - this.arrTracks.push(newTrack); + this.arrLayers.splice(0, 0, thingToPush); + this.arrTracks.splice(0, 0, newTrack); thingToPush.layerPosition=this.arrLayers.length-1; newTrack.trackPosition=this.arrTracks.length-1; this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1]; -- cgit v1.2.3 From e34a3ec35118690a8addbe1c75e76a747fd75259 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 7 Feb 2012 22:51:20 -0800 Subject: Timeline: Finish focus/blur for left side of panel. Add new methods selectLayer, getLayerIndexByID and getLayerIndexByName. --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 2 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 112 ++++++++++++++------- 2 files changed, 75 insertions(+), 39 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 1785f888..f7cd40ca 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -173,7 +173,7 @@
-
+
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a8934017..f942f36e 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -159,10 +159,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // New click listener to handle select/deselect events this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); - this.timeline_leftpane.addEventListener("blur", this.timelineLeftPanelBlur.bind(this), false); - this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false); - + // New click listener on body to handle "blurring" the panel + document.addEventListener("click", this.handleBlur.bind(this), false); // Simultaneous scrolling of the layer and tracks this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); @@ -254,47 +253,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (ptrParent !== false) { // Why yes, the click was within a layer. But which one? var strLabel = ptrParent.querySelector(".label-layer .collapsible-label").innerText, - myIndex = 0, - i = 0, - arrLayersLength = this.arrLayers.length; - console.log(strLabel); - for (i = 0; i < arrLayersLength; i++) { - if (this.arrLayers[i].layerName === strLabel) { - myIndex = i; - this.arrLayers[i].isSelected = true; - } else { - this.arrLayers[i].isSelected = false; - } - } + myIndex = this.getLayerIndexByName(strLabel); + this.selectLayer(myIndex); } } }, - timelineLeftPanelBlur: { + handleBlur: { value: function(event) { - console.log('blur called with ' + this._skipNextBlur); - if (this._skipNextBlur === true) { - this._skipNextBlur = false; - } else { - var i = 0, - arrLayersLength = this.arrLayers.length; - for (i = 0; i < arrLayersLength; i++) { - this.arrLayers[i].isSelected = false; - } - this.layerRepetition.selectedIndexes = null; - } - } - }, - _skipNextBlur : { - value: false - }, - timelineLeftPanelMousedown : { - value: function(event) { - console.log(event.target.classList) - var ptrParent = nj.queryParentSelector(event.target, ".label-style"); - console.log('mousedown with ' + ptrParent) + var ptrParent = nj.queryParentSelector(event.target, ".tl_leftpane"); if (ptrParent !== false) { - this._skipNextBlur = true; + // We were clicking somewhere within the left pane, so we shouldn't blur. + } else { + this.selectLayer("none"); } } }, @@ -399,6 +370,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { newTrack.trackPosition=myIndex; this.arrLayers.splice(myIndex, 0, thingToPush); this.arrTracks.splice(myIndex, 0, newTrack); + /* this.currentLayerSelected= this.arrLayers[myIndex]; var i = 0, arrLayersLength = this.arrLayers.length; @@ -410,6 +382,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } this.layerRepetition.selectedIndexes = [myIndex]; + */ + + this.selectLayer(myIndex); + } else { this.arrLayers.splice(0, 0, thingToPush); this.arrTracks.splice(0, 0, newTrack); @@ -741,6 +717,66 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return hashTrackObject; } + }, + + selectLayer : { + value: function(layerIndex) { + // Select a layer based on its index. + // use layerIndex = "none" to deselect all layers. + var i = 0, + arrLayersLength = this.arrLayers.length; + for (i = 0; i < arrLayersLength; i++) { + if (i === layerIndex) { + this.arrLayers[i].isSelected = true; + } else { + this.arrLayers[i].isSelected = false; + } + } + + if (layerIndex !== "none") { + this.layerRepetition.selectedIndexes = [layerIndex]; + this.currentLayerSelected = this.arrLayers[layerIndex] + } else { + this.layerRepetition.selectedIndexes = null; + this.currentLayerSelected = null; + } + } + }, + + getLayerIndexByID : { + value: function(layerID) { + // Get the index in this.arrLayers that matches a particular layerID. + // Returns false if no match. + var i = 0, + returnVal = false, + arrLayersLength = this.arrLayers.length; + + for (i=0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerID === layerID) { + returnVal = i; + } + } + + return returnVal; + + } + }, + getLayerIndexByName : { + value: function(layerName) { + // Get the index in this.arrLayers that matches a particular layerName + // Returns false if no match + var i = 0, + returnVal = false, + arrLayersLength = this.arrLayers.length; + + for (i=0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerName === layerName) { + returnVal = i; + } + } + + return returnVal; + } } /* === END: Controllers === */ -- cgit v1.2.3 From 6ce7a6c94b2ea24a3a3a2aba7230864e924e952b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 7 Feb 2012 23:07:21 -0800 Subject: Timeline: Comment updates. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index f942f36e..52b63376 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -725,6 +725,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // use layerIndex = "none" to deselect all layers. var i = 0, arrLayersLength = this.arrLayers.length; + + // First, update this.arrLayers[].isSelected for (i = 0; i < arrLayersLength; i++) { if (i === layerIndex) { this.arrLayers[i].isSelected = true; @@ -733,6 +735,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } + // Next, update this.layerRepetition.selectedIndexes and this.currentLayerSelected. if (layerIndex !== "none") { this.layerRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex] -- cgit v1.2.3 From f15310815073203d72de97aa20dbfaa5707ca726 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 8 Feb 2012 10:29:54 -0800 Subject: Timeline: Feature: select first layer by default. Bug fix: Remove left panel blur; we should never have a situation where no layers are selected. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 47 ++++++---------------- 1 file changed, 13 insertions(+), 34 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 48537cef..860868e5 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -38,9 +38,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._layerRepetition = newVal; } }, - + _currentLayerNumber: { + value: 0 + }, currentLayerNumber:{ - value:0 + get: function() { + return this._currentLayerNumber; + }, + set: function(newVal) { + if (newVal !== this._currentLayerNumber) { + this._currentLayerNumber = newVal; + } + } }, millisecondsOffset:{ @@ -153,9 +162,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // New click listener to handle select/deselect events this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); - - // New click listener on body to handle "blurring" the panel - document.addEventListener("click", this.handleBlur.bind(this), false); // Simultaneous scrolling of the layer and tracks this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); @@ -170,6 +176,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _firstLayerDraw = false; NJevent('newLayer',this._hashKey); _firstLayerDraw = true; + this.selectLayer(0); // TODO - add condition for existing doc and parse DOM for top level elements } @@ -256,17 +263,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, - - handleBlur: { - value: function(event) { - var ptrParent = nj.queryParentSelector(event.target, ".tl_leftpane"); - if (ptrParent !== false) { - // We were clicking somewhere within the left pane, so we shouldn't blur. - } else { - this.selectLayer("none"); - } - } - }, handleNewLayer:{ value:function(event){ @@ -400,7 +396,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.layerRepetition.selectedIndexes = [myIndex]; */ - this.selectLayer(myIndex); + this.selectLayer(myIndex); this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); @@ -810,23 +806,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - getLayerIndexByName : { - value: function(layerName) { - // Get the index in this.arrLayers that matches a particular layerName - // Returns false if no match - var i = 0, - returnVal = false, - arrLayersLength = this.arrLayers.length; - - for (i=0; i < arrLayersLength; i++) { - if (this.arrLayers[i].layerName === layerName) { - returnVal = i; - } - } - - return returnVal; - } - }, insertLayer: { value: function() { -- cgit v1.2.3 From 479cd367696ae5bf02c774e2be75234aad05bce7 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 8 Feb 2012 10:36:45 -0800 Subject: Keyframe and span style updates and change time marker times Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 860868e5..c93e66d0 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -53,7 +53,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, millisecondsOffset:{ - value:5000 + value:1000 }, // Track model -- cgit v1.2.3 From a15c1ef996a4d8cb65d91bf940563ee3dea3f5aa Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 8 Feb 2012 10:37:05 -0800 Subject: Timeline: restore method incorrectly removed in last commit. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 860868e5..395b2b76 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -806,6 +806,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + + getLayerIndexByName : { + value: function(layerName) { + // Get the index in this.arrLayers that matches a particular layerName + // Returns false if no match + var i = 0, + returnVal = false, + arrLayersLength = this.arrLayers.length; + + for (i=0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerName === layerName) { + returnVal = i; + } + } + + return returnVal; + } + }, insertLayer: { value: function() { -- cgit v1.2.3