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. --- js/panels/Timeline/Layer.reel/Layer.html | 5 ++ js/panels/Timeline/Layer.reel/Layer.js | 29 +++++++- js/panels/Timeline/Style.reel/Style.js | 22 ++++++ .../Timeline/TimelinePanel.reel/TimelinePanel.html | 8 ++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 81 ++++++++++++++++++++-- 5 files changed, 137 insertions(+), 8 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 add6cb38..add28385 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -66,6 +66,11 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.editorProperty", "oneway" : false }, + "isSelected" : { + "boundObject" : {"@": "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", + "oneway" : false + }, "editorValue" : { "boundObject" : {"@": "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue", diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 29171272..c5f5d7e4 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -103,6 +103,7 @@ var Layer = exports.Layer = Montage.create(Component, { _isSelected:{ value: false, writable: true, + serializable: true, enumerable: false }, @@ -111,7 +112,22 @@ var Layer = exports.Layer = Montage.create(Component, { return this._isSelected; }, set:function(value){ - this._isSelected = value; + if (value !== this._isSelected) { + // Only concerned about different values + if (value === false) { + // Deselect all of the styles + var i = 0, arrLayerStylesLength = this.arrLayerStyles.length; + if (arrLayerStylesLength > 0) { + for (i = 0; i < arrLayerStylesLength; i++) { + this.arrLayerStyles[i].isSelected = false; + } + this.styleRepetition.selectedIndexes = null; + } + } + this._isSelected = value; + this.needsDraw = true; + } + } }, _isAnimated:{ @@ -335,6 +351,12 @@ var Layer = exports.Layer = Montage.create(Component, { this.styleCollapser.bypassAnimation = true; this.styleCollapser.toggle(); } + + if (this.isSelected) { + this.element.classList.add("selected"); + } else { + this.element.classList.remove("selected"); + } } }, /* End: Draw cycle */ @@ -398,6 +420,7 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.editorProperty = ""; newStyle.editorValue = ""; newStyle.ruleTweener = false; + newStyle.isSelected = true; if (!!this.styleRepetition.selectedIndexes) { mySelection = this.styleRepetition.selectedIndexes[0]; @@ -450,13 +473,13 @@ var Layer = exports.Layer = Montage.create(Component, { handleAddStyleClick: { value: function(event) { // Stop the event propagation - event.stopPropagation(); + //event.stopPropagation(); this.addStyle(); } }, handleDeleteStyleClick: { value: function(event) { - event.stopPropagation(); + //event.stopPropagation(); this.deleteStyle(); } }, diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 796385d0..bf254795 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -19,6 +19,23 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { }, /* === BEGIN: Models === */ + // isSelected: whether or not the style is selected + _isSelected: { + serializable: true, + value: false + }, + isSelected: { + serializable: true, + get: function() { + return this._isSelected; + }, + set: function(newVal) { + if (newVal !== this._isSelected) { + this._isSelected = newVal; + this.needsDraw = true; + } + } + }, // Property for this editor _editorProperty: { @@ -152,6 +169,11 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // Show the right thing this._showView(); } + if (this.isSelected) { + this.element.classList.add("selected"); + } else { + this.element.classList.remove("selected"); + } } }, didDraw: { 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