From a8c16ca440b8ded3b78b59c767539e8c080680e7 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 8 Feb 2012 16:12:58 -0800 Subject: Squashed commit of the following: commit 46292bddbfbe7415c6852142dd10fd02a276722a Author: Jon Reid Date: Wed Feb 8 14:32:22 2012 -0800 Timeline: turn off console logging. commit b8de88393182bc6e819c3d6a290ade2f804236ac Merge: e651344 37b952c Author: Jon Reid Date: Wed Feb 8 14:10:06 2012 -0800 Merge branch 'Timeline-jduran' into Timeline-jreid commit e651344d5d6c2911b31a54510c65a349c4d52db2 Author: Jon Reid Date: Wed Feb 8 14:08:25 2012 -0800 Timeline: Bug fixes IKNINJA-947: Weird behavior with adding layers with an empty layer name selected IKNINJA-990: Multiple styles can be highlighted at the same time even when they are under different layers IKNINJA-1063: Styles can be added while style column is collapsed IKNINJA-970: When there is no style added yet, the arrow sign should be in a collapsed mode Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.html | 5 + js/panels/Timeline/Layer.reel/Layer.js | 118 ++++++++++++++++++--- js/panels/Timeline/Style.reel/Style.js | 23 ++++ .../Timeline/TimelinePanel.reel/TimelinePanel.html | 5 + .../Timeline/TimelinePanel.reel/TimelinePanel.js | 27 +++-- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 7 ++ 6 files changed, 166 insertions(+), 19 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 add28385..dd819b2b 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -71,6 +71,11 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", "oneway" : false }, + "isActive" : { + "boundObject" : {"@": "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isActive", + "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 c5f5d7e4..71a1f01f 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -5,6 +5,7 @@ var Hintable = require("js/components/hintable.reel").Hintable; var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle; var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; +var nj = require("js/lib/NJUtils").NJUtils; var Layer = exports.Layer = Montage.create(Component, { @@ -100,6 +101,8 @@ var Layer = exports.Layer = Montage.create(Component, { this._layerID = value; } }, + + /* isSelected: whether or not the layer is currently selected. */ _isSelected:{ value: false, writable: true, @@ -115,14 +118,8 @@ var Layer = exports.Layer = Montage.create(Component, { 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; - } + // If changing from false to true, we need to deselect any associated styles + this.selectStyle(false); } this._isSelected = value; this.needsDraw = true; @@ -130,6 +127,23 @@ var Layer = exports.Layer = Montage.create(Component, { } }, + + /* isActive: Whether or not the user is actively clicking within the layer; used to communicate state with + * TimelinePanel. + */ + _isActive: { + value: false + }, + isActive: { + get: function() { + return this._isActive; + }, + set: function(newVal) { + this._isActive = newVal; + } + }, + + _isAnimated:{ value: false, writable: true, @@ -328,6 +342,10 @@ var Layer = exports.Layer = Montage.create(Component, { this.buttonDeleteStyle.identifier = "deleteStyle"; this.buttonDeleteStyle.addEventListener("click", this, false); + + // Add mousedown listener to set isActive + this.element.addEventListener("mousedown", this, false); + //this.element.addEventListener("click", this, false); } }, @@ -408,7 +426,9 @@ var Layer = exports.Layer = Montage.create(Component, { // newStyle = LayerStyle.create(), newStyle = {}, newEvent = document.createEvent("CustomEvent"); - + + this.isStyleCollapsed = false; + newEvent.initCustomEvent("layerEvent", false, true); newEvent.layerEventLocale = "styles"; newEvent.layerEventType = "newStyle"; @@ -420,17 +440,19 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.editorProperty = ""; newStyle.editorValue = ""; newStyle.ruleTweener = false; - newStyle.isSelected = true; - + newStyle.isSelected = false; + if (!!this.styleRepetition.selectedIndexes) { mySelection = this.styleRepetition.selectedIndexes[0]; this.arrLayerStyles.splice(mySelection, 0, newStyle); - this.styleRepetition.selectedIndexes = [mySelection]; + //this.styleRepetition.selectedIndexes = [mySelection]; + this.selectStyle(mySelection); } else { newLength = this.arrLayerStyles.length; this.arrLayerStyles.push(newStyle); mySelection = this.arrLayerStyles.length; - this.styleRepetition.selectedIndexes = [mySelection-1]; + // this.styleRepetition.selectedIndexes = [mySelection-1]; + this.selectStyle(mySelection-1); } // Set up the event info and dispatch the event @@ -467,6 +489,49 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, + selectStyle : { + value: function(styleIndex) { + + // Select a style based on its index. + // use layerIndex = false to deselect all styles. + var i = 0, + arrLayerStylesLength = this.arrLayerStyles.length; + + // First, update this.arrStyles[].isSelected + for (i = 0; i < arrLayerStylesLength; i++) { + if (i === styleIndex) { + this.arrLayerStyles[i].isSelected = true; + } else { + this.arrLayerStyles[i].isSelected = false; + } + } + + // Next, update this.styleRepetition.selectedIndexes. + if (styleIndex !== false) { + this.styleRepetition.selectedIndexes = [styleIndex]; + } else { + this.styleRepetition.selectedIndexes = null; + } + + } + }, + getActiveStyleIndex : { + value: function() { + // Searches through the styles and looks for one that has + // set its isActive flag to true. + var i = 0, + returnVal = false, + arrLayerStylesLength = this.arrLayerStyles.length; + + for (i = 0; i < arrLayerStylesLength; i++) { + if (this.arrLayerStyles[i].isActive === true) { + returnVal = i; + this.arrLayerStyles[i].isActive = false; + } + } + return returnVal; + } + }, /* End: Controllers */ /* Begin: Event handlers */ @@ -498,6 +563,33 @@ var Layer = exports.Layer = Montage.create(Component, { this.needsDraw = true; } }, + handleMousedown: { + value: function(event) { + this.isActive = true; + // Check ALL THE CLICKS + // Are they in a particular style? If so, we need to select that style and + // deselect the others. + var ptrParent = nj.queryParentSelector(event.target, ".content-style"); + if (ptrParent !== false) { + // Why yes, the click was within a layer. But which one? + var myIndex = this.getActiveStyleIndex(); + this.selectStyle(myIndex); + } + } + }, + handleLayerClick : { + value: function(event) { + // Check ALL THE CLICKS + // Are they in a particular style? If so, we need to select that style and + // deselect the others. + var ptrParent = nj.queryParentSelector(event.target, ".content-style"); + if (ptrParent !== false) { + // Why yes, the click was within a layer. But which one? + var myIndex = this.getActiveStyleIndex(); + this.selectStyle(myIndex); + } + } + }, /* End: Event handlers */ /* Begin: Logging routines */ diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index bf254795..e6e03901 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -36,6 +36,21 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { } } }, + + /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with + * parent Layer. + */ + _isActive: { + value: false + }, + isActive: { + get: function() { + return this._isActive; + }, + set: function(newVal) { + this._isActive = newVal; + } + }, // Property for this editor _editorProperty: { @@ -153,6 +168,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.needsDraw = true; } }, + + handleMousedown: { + value: function(event) { + this.isActive = true; + } + }, /* === END: Models === */ @@ -238,6 +259,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this.containerPropvals = this.element.querySelector(".container-propvals"); this.valueEditorInput = this.element.querySelector(".editor-input input"); + // mousedown listener to handle + this.element.addEventListener("mousedown", this, false); } }, diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index f7cd40ca..29bf6eb3 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -98,6 +98,11 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", "oneway" : false }, + "isActive" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isActive", + "oneway" : false + }, "isStyleCollapsed" : { "boundObject" : {"@" : "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 8f7c63bf..f56eaf74 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -184,7 +184,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { updateLayerScroll:{ value:function(){ - console.log(this.layout_tracks.scrollLeft) this.user_layers.scrollTop = this.layout_tracks.scrollTop; this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; } @@ -257,8 +256,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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 = this.getLayerIndexByName(strLabel); + var myIndex = this.getActiveLayerIndex(); this.selectLayer(myIndex); } } @@ -345,7 +343,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.isMainCollapsed = true; thingToPush.isPositionCollapsed = true; thingToPush.isTransformCollapsed = true; - thingToPush.isStyleCollapsed = false; + thingToPush.isStyleCollapsed = true; thingToPush.arrLayerStyles = []; thingToPush.element=[]; thingToPush.deleted=false; @@ -764,7 +762,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { selectLayer : { value: function(layerIndex) { // Select a layer based on its index. - // use layerIndex = "none" to deselect all layers. + // use layerIndex = false to deselect all layers. var i = 0, arrLayersLength = this.arrLayers.length; @@ -778,7 +776,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } // Next, update this.layerRepetition.selectedIndexes and this.currentLayerSelected. - if (layerIndex !== "none") { + if (layerIndex !== false) { this.layerRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex] } else { @@ -824,6 +822,23 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return returnVal; } }, + getActiveLayerIndex : { + value: function() { + // Searches through the layers and looks for one that has + // set its isActive flag to true. + var i = 0, + returnVal = false, + arrLayersLength = this.arrLayers.length; + + for (i = 0; i < arrLayersLength; i++) { + if (this.arrLayers[i].isActive === true) { + returnVal = i; + this.arrLayers[i].isActive = false; + } + } + return returnVal; + } + }, insertLayer: { value: function() { diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 5b1354d2..ae7eb001 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -414,6 +414,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._styleCollapser.handleCollapserLabelClick(); } } + /* + if (layerEvent.layerEventType === "newStyle") { + var newDiv = document.createElement("div"); + newDiv.classList.add("timeline-track"); + this.contentStyles.appendChild(newDiv); + } + */ } } }); \ No newline at end of file -- cgit v1.2.3