From 53a604d0ccb1315576b94406cf3b0b958162307b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 27 Apr 2012 14:41:15 -0700 Subject: Timeline: Multiselect. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 166 +++++++++++++++++++-- 1 file changed, 151 insertions(+), 15 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 70e04b4c..546a6abf 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -138,6 +138,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.cacheTimeline(); } }, + // 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 + } + }, _currentSelectedContainer: { value: null @@ -406,6 +420,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, + // 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: Draw cycle === */ /* === BEGIN: Controllers === */ // Create an empty layer template object with minimal defaults and return it for use @@ -549,14 +572,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.layout_markers = this.element.querySelector(".layout_markers"); // Add some event handlers - this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false); - this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false); + //this.timeline_leftpane.addEventListener("mousedown", 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); // Bind some bindings Object.defineBinding(this, "currentSelectedContainer", { @@ -848,15 +874,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { selectLayers:{ - value:function (arrSelectedIndexes) { + value:function (arrSelectedIndexes, userSelection) { var i = 0, arrLayersLength = this.arrLayers.length, arrSelectedIndexesLength = arrSelectedIndexes.length, - userSelection = false; + arrSelectedLayers = false; - //console.log(arrSelectedIndexes); + if (typeof(userSelection) === "undefined") { + userSelection = false; + } + console.log(arrSelectedIndexes); + if (this.selectedKeyframes) { this.deselectTweens(); @@ -867,9 +897,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.triggerLayerBinding(i); } - this.currentLayersSelected = false; if (arrSelectedIndexesLength > 0) { - this.currentLayersSelected = []; + arrSelectedLayers = []; } @@ -878,12 +907,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.arrLayers[i].layerData.isSelected = true; this.arrLayers[i].isSelected = true; this.triggerLayerBinding(i); - this.currentLayersSelected.push(i); + arrSelectedLayers.push(i); + + if (userSelection && this._captureSelection) { + this.application.ninja.selectionController.selectElements(this.arrLayers[i].layerData.elementsList); + } } } - + + this.currentLayersSelected = arrSelectedLayers; this.layerRepetition.selectedIndexes = arrSelectedIndexes; +/* // TODO: Set up for user selection. if (userSelection) { if (this._captureSelection) { @@ -897,7 +932,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } this._captureSelection = true; } - +*/ // Finally, reset the master duration. this.resetMasterDuration(); } @@ -932,16 +967,117 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } - this._isMousedown = true; } }, - timelineLeftPaneMouseup:{ + timelineLeftPanelMousedown: { value:function (event) { - this._isMousedown = false; + console.log('click') + var ptrParent = nj.queryParentSelector(event.target, ".container-layer"), + i = 0, + arrLayers = document.querySelectorAll(".container-layer"), + arrLayersLength = arrLayers.length, + targetIndex = 0, + isAlreadySelected = false, + indexAlreadySelected = 0, + indexLastClicked = 0; + + // Get targetIndex, the index of the clicked target within the DOM array of layers + if (ptrParent === false) { + return; + } + for (i = 0; i < arrLayersLength; i++) { + if (arrLayers[i] == ptrParent) { + targetIndex = i; + } + } + if (this.currentLayersSelected !== false) { + indexAlreadySelected = this.currentLayersSelected.indexOf(targetIndex); + } + + if (indexAlreadySelected > -1) { + isAlreadySelected = true; + } + + if (targetIndex > -1) { + indexLastClicked = targetIndex; + } + + if (this.currentLayersSelected.length === 0) { + this.currentLayersSelected.push(targetIndex); + } else { + if (this._isControlPressed === true) { + // Control key is being pressed, so we need to + // either add the current layer to selectedLayers + // or remove it if it's already there. + if (this.currentLayersSelected === false) { + this.currentLayersSelected = []; + this.currentLayerSelected = false; + } + if (isAlreadySelected === false) { + this.currentLayersSelected.push(targetIndex); + } else { + this.currentLayersSelected.splice(indexAlreadySelected, 1); + } + this.lastLayerClicked = indexLastClicked; + } else if (this._isShiftPressed === true) { + // The shift key is being pressed. + // Start by selecting the lastLayerClicked + if (this.currentLayersSelected === false) { + this.currentLayersSelected = []; + this.currentLayerSelected = false; + } + this.currentLayersSelected = [this.lastLayerClicked]; + // Add all the layers between lastLayerClicked and targetIndex + if (targetIndex > this.lastLayerClicked) { + for (i = this.lastLayerClicked+1; i <= targetIndex; i++) { + this.currentLayersSelected.push(i); + } + } else if (targetIndex < this.lastLayerClicked) { + for (i = targetIndex; i < this.lastLayerClicked; i++) { + this.currentLayersSelected.push(i); + } + } + } else { + // No key is pressed, so just select the element + // and update lastLayerClicked + this.currentLayersSelected = [targetIndex]; + this.lastLayerClicked = targetIndex; + } + + } + this._captureSelection = true; + this.selectLayers(this.currentLayersSelected, true); } - }, - + }, + + timelineLeftPaneKeydown: { + value: function(event) { + console.log('keydown') + if (event.keyCode === 16) { + // Shift key has been pressed + this._isShiftPressed = true; + } + if (event.keyCode === 17) { + // Control key has been pressed + this._isControlPressed = true; + } + } + }, + + timelineLeftPaneKeyup: { + value: function(event) { + console.log('keyup') + if (event.keyCode === 16) { + // Shift key has been released + this._isShiftPressed = false; + } + if (event.keyCode === 17) { + // Control key has been released + this._isControlPressed = false; + } + } + }, createNewLayer:{ value:function (object) { var newLayerName = "", -- cgit v1.2.3 From e33a4e58c271a9507082694a5268b840fdd05968 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 15 May 2012 11:14:16 -0700 Subject: Timeline: Code cleanup. Improve efficiency for track scrolling. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 72 +++++++++++----------- 1 file changed, 36 insertions(+), 36 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 7f4fee89..d85259cb 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -57,6 +57,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._layerRepetition = newVal; } }, + + _areTracksScrolling: { + value: false + }, // Set to false to skip array caching array sets in current document _boolCacheArrays:{ @@ -240,10 +244,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - _isLayer:{ - value:false - }, - _firstTimeLoaded:{ value:true }, @@ -370,35 +370,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { prepareForDraw:{ value:function () { this.initTimeline(); - // 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.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false); - this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false); - this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); - document.addEventListener("click", this.handleDocumentClick.bind(this), false); - - } - }, - - willDraw:{ - value:function () { - if (this._isLayer) { - this._isLayer = false; - } } }, @@ -453,6 +424,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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"; + } } }, @@ -597,6 +576,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false); + this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.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("mousedown", this.timelineLeftPaneMousedown.bind(this), false); this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false); @@ -824,9 +825,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { updateLayerScroll:{ value:function () { - 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"; + this._areTracksScrolling = true; + this.needsDraw = true; } }, -- cgit v1.2.3 From 26f1524c049791cb9cd81695c57b84d952a2e7e6 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 15 May 2012 16:08:26 -0700 Subject: Timeline: Multiselect from the layer panel. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 184 +++++++++------------ 1 file changed, 82 insertions(+), 102 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 767dc362..f6e0e252 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -95,6 +95,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.cacheTimeline(); } }, + _currentElementsSelected: { + value: [] + }, + currentElementsSelected: { + get: function() { + return this._currentElementsSelected; + }, + set: function(newVal) { + this._currentElementsSelected = newVal; + this.cacheTimeline(); + } + }, _selectedLayerID:{ value:false @@ -506,6 +518,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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; } } }, @@ -519,6 +532,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; this.application.ninja.currentDocument.tlCurrentLayerSelected = false; this.application.ninja.currentDocument.tlCurrentLayersSelected = false; + this.application.ninja.currentDocument.tlCurrentElementsSelected = []; } }, @@ -622,8 +636,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { document.addEventListener("click", this.handleDocumentClick.bind(this), false); // Add some event handlers - //this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false); - this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false); + this.timeline_leftpane.addEventListener("mousedown", 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); @@ -708,8 +722,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerNumber = storedCurrentLayerNumber; boolAlreadyInitialized = true; this.application.ninja.currentDocument.setLevel = false; - - } else { //console.log('TimelinePanel.initTimelineForDocument: else fallback'); // we do have information stored. Use it. @@ -729,6 +741,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected; this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected; + this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected; this._currentDocumentUuid = this.application.ninja.currentDocument.uuid; @@ -737,6 +750,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; } + // TODO: select elements stored in currentElementsSelected. + // Are we only showing animated layers? if (this.application.ninja.currentDocument.boolShowOnlyAnimated) { // Fake a click. @@ -773,6 +788,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerNumber = 0; this.currentLayerSelected = false; this.currentLayersSelected = false; + this.currentElementsSelected = []; this.selectedKeyframes = []; this.selectedTweens = []; this._captureSelection = false; @@ -878,7 +894,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.updateTimeText(currentMillisec); } }, - + handleSelectionChange:{ value:function () { var layerIndex, @@ -887,7 +903,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrLayersLength = this.arrLayers.length, intNumSelected = this.application.ninja.selectedElements.length, checkIndex = 0; - + //console.log("TimelinePanel.handleSelectionChange, intNumSelected is ", intNumSelected) if (intNumSelected === 0) { @@ -899,30 +915,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerSelected = false; this.currentLayersSelected = false; - } - - if (intNumSelected === 1) { - this.currentLayersSelected = false; - if (this.application.ninja.selectedElements[0]) { - checkIndex = this.application.ninja.selectedElements[0].uuid; - for (i = 0; i < arrLayersLength; i++) { - var currIndex = this.arrLayers[i].layerData.elementsList[0].uuid, - layerID = this.arrLayers[i].layerData.layerID, - layerIndex = 0; - if (checkIndex === currIndex) { - layerIndex = this.getLayerIndexByID(layerID); - this._captureSelection = false; - this.selectLayer(layerIndex); - this._captureSelection = true; - } - } - } - } - - if (intNumSelected > 1) { + } else { // Build an array of indexes of selected layers to give to the selectLayers method var arrSelectedIndexes = []; - this.currentLayerSelected = false; + //this.currentLayerSelected = false; for (i = 0; i < intNumSelected; i++) { var currentCheck = this.application.ninja.selectedElements[i].uuid; //console.log("checking ", currentCheck); @@ -939,71 +935,71 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - - selectLayers:{ value:function (arrSelectedIndexes, userSelection) { var i = 0, arrLayersLength = this.arrLayers.length, arrSelectedIndexesLength = arrSelectedIndexes.length, - arrSelectedLayers = false; + arrSelectedLayers = false, + arrCurrentElementsSelected = []; - if (typeof(userSelection) === "undefined") { + // Set a default for userSelection if it wasn't passed in the method call. + if (typeof(userSelection) === "undefined") { userSelection = false; } - - console.log(arrSelectedIndexes); - - if (this.selectedKeyframes) { + // Deselect tweens if necessary. + if (this.selectedKeyframes) { this.deselectTweens(); } + // deselect all layers. for (i = 0; i < arrLayersLength; i++) { - this.arrLayers[i].layerData.isSelected = false; - this.triggerLayerBinding(i); + if (this.arrLayers[i].layerData.isSelected === true) { + this.arrLayers[i].layerData.isSelected = false; + this.triggerLayerBinding(i); + } } - if (this.currentLayersSelected !== false) { this.currentLayersSelected = false; } + + // If we are actually going to be selecting things, create an empty array to use if (arrSelectedIndexesLength > 0) { arrSelectedLayers = []; } - + // Loop through arrLayers and do the selection. for (i = 0; i < arrLayersLength; i++) { if (arrSelectedIndexes.indexOf(i) > -1) { + //console.log('TimelinePanel.selectLayers, selecting layer at index ', i) this.arrLayers[i].layerData.isSelected = true; this.arrLayers[i].isSelected = true; this.triggerLayerBinding(i); arrSelectedLayers.push(i); - - if (userSelection && this._captureSelection) { - this.application.ninja.selectionController.selectElements(this.arrLayers[i].layerData.elementsList); - } + arrCurrentElementsSelected.push(this.arrLayers[i].layerData.elementsList[0]); } } - - this.currentLayersSelected = arrSelectedLayers; - this.layerRepetition.selectedIndexes = arrSelectedIndexes; + -/* - // TODO: Set up for user selection. - if (userSelection) { - if (this._captureSelection) { + // Select the element(s) on the stage. + if (userSelection && this._captureSelection) { + if (this.currentElementsSelected.length >0) { + this.application.ninja.selectionController.selectElements(arrCurrentElementsSelected); + } else { + this.application.ninja.selectionController.executeSelectElement(); + } + + } - if (this.currentLayerSelected.layerData.elementsList.length >= 1) { - this.application.ninja.selectionController.selectElements(this.currentLayerSelected.layerData.elementsList); - } else { - this.application.ninja.selectionController.executeSelectElement(); - } + // Store the selected layer information + this.currentLayersSelected = arrSelectedLayers; + this.currentElementsSelected = arrCurrentElementsSelected; + + // Tell the repetition what has been selected + this.layerRepetition.selectedIndexes = arrSelectedIndexes; - } - this._captureSelection = true; - } -*/ // Finally, reset the master duration. this.resetMasterDuration(); } @@ -1019,22 +1015,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - timelineLeftPaneMousedown:{ - value:function (event) { - var ptrParent = nj.queryParentSelector(event.target, ".container-layer"); - if (ptrParent !== false) { - var myIndex = this.getActiveLayerIndex(); - if (myIndex !== false) { - this.selectLayer(myIndex, true); - } - - } - } - }, - timelineLeftPanelMousedown: { value:function (event) { - console.log('click') var ptrParent = nj.queryParentSelector(event.target, ".container-layer"), i = 0, arrLayers = document.querySelectorAll(".container-layer"), @@ -1044,50 +1026,61 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { indexAlreadySelected = 0, indexLastClicked = 0; - // Get targetIndex, the index of the clicked target within the DOM array of layers + // Did the mousedown event originate within a layer? if (ptrParent === false) { + // No it did not. Do nothing. return; } + + // Get the targetIndex, the index in the arrLayers of the + // layer that was just clicked on for (i = 0; i < arrLayersLength; i++) { if (arrLayers[i] == ptrParent) { targetIndex = i; } } + + // Did we just click on a layer that's already selected? if (this.currentLayersSelected !== false) { indexAlreadySelected = this.currentLayersSelected.indexOf(targetIndex); } - if (indexAlreadySelected > -1) { isAlreadySelected = true; } + /* if (targetIndex > -1) { indexLastClicked = targetIndex; } + */ + // Now, do the selection based on all of that information. if (this.currentLayersSelected.length === 0) { + // Nothing selected yet, so just push the new index into the array. this.currentLayersSelected.push(targetIndex); } else { + // Something is already selected. What do do depends on whether + // or not other keys are pressed. if (this._isControlPressed === true) { // Control key is being pressed, so we need to // either add the current layer to selectedLayers // or remove it if it's already there. if (this.currentLayersSelected === false) { this.currentLayersSelected = []; - this.currentLayerSelected = false; + //this.currentLayerSelected = false; } if (isAlreadySelected === false) { this.currentLayersSelected.push(targetIndex); } else { this.currentLayersSelected.splice(indexAlreadySelected, 1); } - this.lastLayerClicked = indexLastClicked; + this.lastLayerClicked = targetIndex; } else if (this._isShiftPressed === true) { // The shift key is being pressed. // Start by selecting the lastLayerClicked if (this.currentLayersSelected === false) { this.currentLayersSelected = []; - this.currentLayerSelected = false; + //this.currentLayerSelected = false; } this.currentLayersSelected = [this.lastLayerClicked]; // Add all the layers between lastLayerClicked and targetIndex @@ -1115,7 +1108,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { timelineLeftPaneKeydown: { value: function(event) { - console.log('keydown') if (event.keyCode === 16) { // Shift key has been pressed this._isShiftPressed = true; @@ -1129,7 +1121,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { timelineLeftPaneKeyup: { value: function(event) { - console.log('keyup') if (event.keyCode === 16) { // Shift key has been released this._isShiftPressed = false; @@ -1201,7 +1192,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.arrLayers.splice(myIndex, 0, thingToPush); } - this.selectLayer(myIndex); + this.selectLayers([myIndex]); } }, @@ -1244,7 +1235,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { deleteLayer:{ value:function (arrElements) { - // Only delete a selected layers. If no layers are selected, do nothing. + // Only delete selected layers. If no layers are selected, do nothing. var i = 0, arrLayers = document.querySelectorAll(".container-layers .container-layer"), arrLayersLength = arrLayers.length; @@ -1257,26 +1248,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerSelected = false; this.currentLayersSelected = false; + this.selectedElements = []; this.resetMasterDuration(); - - - /* - var length = elements.length; - - while(length>0){ - if (this.layerRepetition.selectedIndexes.length > 0) { - // Delete the selected layer. - var myIndex = this.layerRepetition.selectedIndexes[0]; - this.arrLayers.splice(myIndex, 1); - var selectIndex = this.arrLayers.length; - this.resetMasterDuration(); - if(selectIndex>0){ - this.selectLayer(selectIndex-1); - } - length--; - } - } - */ + } }, @@ -1309,6 +1283,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerSelected.layerData.elementsList = []; } this.currentLayerSelected.layerData.elementsList.push(this.application.ninja.selectedElements[0]); + + // TODO: verify this is correct. + this.selectedElements = []; + this.selectedElements.push(this.application.ninja.selectedElements[0]); // this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName; } }, @@ -1432,6 +1410,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { selectLayer:{ value:function (layerIndex, userSelection) { +console.log('TimelinePanel.selectLayer') + var i = 0; var arrLayersLength = this.arrLayers.length; -- cgit v1.2.3 From a696dffcc84b4d2719f8fa918676f9575858ca9a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 17 May 2012 16:52:16 -0700 Subject: Timeline: Multiselect improvements. New convenience methods. Multiselect drag and drop. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 329 ++++++++++++++++++--- 1 file changed, 294 insertions(+), 35 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index f6e0e252..1ddb3977 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -326,6 +326,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, + _dragLayerIndexes: { + value: [] + }, _dropLayerID : { value: null }, @@ -337,6 +340,38 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (newVal !== this._dropLayerID) { this._dropLayerID = newVal; + var dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), + arrDragLayers = [], + i = 0, + dragLayerIndexesLength = this._dragLayerIndexes.length; + + // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? + + for (i = 0; i < dragLayerIndexesLength; i++) { + var myDraggingLayer = this.arrLayers[this._dragLayerIndexes[i]]; + arrDragLayers.push(myDraggingLayer); + this.arrLayers.splice(this._dragLayerIndexes[i], 1); + this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); + } + console.log(arrDragLayers); + //this.arrLayers.splice(dropLayerIndex, 0, arrDragLayers); + this.layersDragged = arrDragLayers; + console.log(this.layersDragged); + console.log(this.arrLayers); + this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; + this.cacheTimeline(); + + this._dropLayerID = null; + this.dragLayerIndexes = []; + this._dragLayerIndexes = []; + 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.needsDraw = true; + +/* var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), dragLayer = this.arrLayers[dragLayerIndex]; @@ -355,6 +390,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // So just in case, set the draw routine to delete the helper. this._deleteHelper = true; this.needsDraw = true; +*/ } } }, @@ -480,6 +516,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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; @@ -584,7 +621,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Bind all document-specific events (pass in true to unbind) _bindDocumentEvents : { value: function(boolUnbind) { - var arrEvents = [ "newLayer", + var arrEvents = [ "stageElement", "deleteLayer", "elementAdded", "elementsRemoved", @@ -895,13 +932,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - handleSelectionChange:{ - value:function () { + // Event handler for changes in stage selection. + handleSelectionChange: { + value:function (event) { + this.updateLayerSelection(); + /* var layerIndex, i = 0, j = 0, arrLayersLength = this.arrLayers.length, - intNumSelected = this.application.ninja.selectedElements.length, + intNumSelected = event.detail.elements.length, checkIndex = 0; //console.log("TimelinePanel.handleSelectionChange, intNumSelected is ", intNumSelected) @@ -919,12 +959,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Build an array of indexes of selected layers to give to the selectLayers method var arrSelectedIndexes = []; //this.currentLayerSelected = false; + + //console.log(event.detail.elements); + //console.log(this.layerRepetition.childComponents); + for (i = 0; i < intNumSelected; i++) { - var currentCheck = this.application.ninja.selectedElements[i].uuid; + var currentCheck = event.detail.elements[i]; //console.log("checking ", currentCheck); for (j = 0; j < arrLayersLength; j++) { - //console.log(".......... ", this.arrLayers[j].layerData.elementsList[0].uuid) - if (currentCheck === this.arrLayers[j].layerData.elementsList[0].uuid) { + //console.log(".......... ", this.arrLayers[j].layerData.stageElement) + // if (currentCheck === this.arrLayers[j].layerData.elementsList[0].uuid) { + if (currentCheck === this.arrLayers[j].layerData.stageElement) { //console.log("...............Yes!") arrSelectedIndexes.push(j); } @@ -932,17 +977,120 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } this.selectLayers(arrSelectedIndexes); } + */ } }, + // Select the layers whose indexes are passed in as arrSelectedIndexes. + // Pass in an empty array to clear all selections. selectLayers:{ - value:function (arrSelectedIndexes, userSelection) { + value:function (arrSelectedIndexes) { + var i = 0, + j = 0, + arrLayersLength = this.arrLayers.length, + arrSelectedIndexesLength = arrSelectedIndexes.length, + currentLayersSelectedLength = this.currentLayersSelected.length, + boolContinue = false, + arrSelectedLayers = false, + arrCurrentElementsSelected = []; + /* + console.log(arrSelectedIndexes); + console.log(this.currentLayersSelected); + // Compare arrSelectedIndexes with this.currentLayersSelected + // If the items are the same, we do not need to do anything. + if (arrSelectedIndexesLength !== currentLayersSelectedLength) { + // Different length in the arrays, we definitely need to continue. + console.log('diferent length') + boolContinue = true; + } else { + // Check each selected index and see if it's in this.currentLayersSelected + // If we find one that isn't, we need to continue + + for (i = 0; i < arrSelectedIndexesLength; i++) { + console.log('checking for ', arrSelectedIndexes[i]); + if (this.currentLayersSelected.indexOf(arrSelectedIndexes[i]) === -1) { + // Ooops, one of them was not found. + boolContinue = true; + } + } + } + if (boolContinue === false) { + console.log('exiting') + return; + } + */ + + // Deselect all layers. + for (i = 0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerData.isSelected === true) { + this.arrLayers[i].layerData.isSelected = false; + this.triggerLayerBinding(i); + } + } + if (this.currentLayersSelected !== false) { + this.currentLayersSelected = false; + } + + // If we are actually going to be selecting things, create an empty array to use + if (arrSelectedIndexesLength > 0) { + arrSelectedLayers = []; + } + + // Loop through arrLayers and do the selection. + for (i = 0; i < arrLayersLength; i++) { + if (arrSelectedIndexes.indexOf(i) > -1) { + //console.log('TimelinePanel.selectLayers, selecting layer at index ', i) + this.arrLayers[i].layerData.isSelected = true; + this.arrLayers[i].isSelected = true; + this.triggerLayerBinding(i); + arrSelectedLayers.push(i); + arrCurrentElementsSelected.push(this.arrLayers[i].layerData.stageElement); + } + } + + // Store the selected layer information + this.currentLayersSelected = arrSelectedLayers; + this.currentElementsSelected = arrCurrentElementsSelected; + + // Tell the repetition what has been selected + this.layerRepetition.selectedIndexes = arrSelectedIndexes; + + // Finally, reset the master duration. + this.resetMasterDuration(); + +/* var i = 0, + j = 0, arrLayersLength = this.arrLayers.length, arrSelectedIndexesLength = arrSelectedIndexes.length, + currentElementsSelectedLength = this.currentElementsSelected.length, + boolUpdate = false, arrSelectedLayers = false, arrCurrentElementsSelected = []; + + + // Only run if arrSelectedIndexes has things that aren't already selected. + if (arrSelectedIndexesLength !== currentElementsSelectedLength) { + // If the two arrays are different lengths, then we need to update + boolUpdate = true; + } else { + // If arrSelectedIndexes has things in it that aren't present in this.currentElementsSelected + // we need to update + for (i = 0; i < arrSelectedIndexesLength; i++) { + var boolWasIFound = false; + for (j = 0; j < currentElementsSelectedLength; j++) { + + } + if (boolWasIFound === false) { + boolUpdate = true; + } + } + } + if (boolUpdate === false) { + return; + } + // Set a default for userSelection if it wasn't passed in the method call. if (typeof(userSelection) === "undefined") { @@ -1002,8 +1150,64 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Finally, reset the master duration. this.resetMasterDuration(); +*/ } }, + + // Get the indexes of layers that should be selected from + // the elements that are currently selected on stage. + getSelectedLayerIndexesFromStage: { + value: function() { + var arrIndexes = [], + i = 0, + j = 0, + arrLayersLength = this.arrLayers.length, + selectedElementsLength = this.application.ninja.selectedElements.length; + + for (i = 0; i < selectedElementsLength; i++) { + var currentTestElement = this.application.ninja.selectedElements[i]; + for (j = 0; j < arrLayersLength; j++) { + if (this.arrLayers[j].layerData.stageElement == currentTestElement) { + arrIndexes.push(j); + } + } + } + return arrIndexes; + } + }, + + // Update the selected layers based on what is selected on stage + updateLayerSelection: { + value: function() { + var arrIndexes = this.getSelectedLayerIndexesFromStage(); + this.selectLayers(arrIndexes); + } + }, + + // Update stage selection based on what layers are selected + updateStageSelection: { + value: function() { + var arrSelectedElements = [], + i = 0, + arrLayersLength = this.arrLayers.length; + + // Get the selected layers + for (i = 0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerData.isSelected === true) { + arrSelectedElements.push(this.arrLayers[i].layerData.stageElement); + } + } + + // Select the layers, or clear the selection if none were found + if (arrSelectedElements.length > 0) { + console.log("TimelinePanel.updateStageSelection, ", arrSelectedElements) + this.application.ninja.selectionController.selectElements(arrSelectedElements); + } else { + this.application.ninja.selectionController.executeSelectElement(); + } + + } + }, deselectTweens:{ value:function () { @@ -1025,7 +1229,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { isAlreadySelected = false, indexAlreadySelected = 0, indexLastClicked = 0; - + + console.log(ptrParent); // Did the mousedown event originate within a layer? if (ptrParent === false) { // No it did not. Do nothing. @@ -1101,8 +1306,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } - this._captureSelection = true; - this.selectLayers(this.currentLayersSelected, true); + //this._captureSelection = true; + this.selectLayers(this.currentLayersSelected); + this.updateStageSelection(); } }, @@ -1131,9 +1337,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, - createNewLayer:{ + createstageElement:{ value:function (object) { - var newLayerName = "", + var stageElementName = "", thingToPush = this.createLayerTemplate(), myIndex = 0, i = 0, @@ -1141,16 +1347,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Make up a layer name. this.currentLayerNumber = this.currentLayerNumber + 1; -// newLayerName = "Layer " + this.currentLayerNumber; - newLayerName=" "; +// stageElementName = "Layer " + this.currentLayerNumber; + stageElementName=" "; // Possibly currentLayerNumber doesn't correctly reflect the // number of layers. Check that. // Commented out to fix WebGL rendering bug /*for(k = 0; k < arrLayersLength; k++){ - if(this.arrLayers[k].layerData.layerName === newLayerName){ + if(this.arrLayers[k].layerData.layerName === stageElementName){ this.currentLayerNumber = this.currentLayerNumber + 1; - newLayerName = "Layer " + this.currentLayerNumber; + stageElementName = "Layer " + this.currentLayerNumber; break; } }*/ @@ -1159,14 +1365,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayersSelected = false; // thingToPush is the template we just got. Now fill it in. - thingToPush.layerData.layerName = newLayerName; + thingToPush.layerData.layerName = stageElementName; thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">"; thingToPush.layerData.layerID = this.currentLayerNumber; thingToPush.parentElement = this.application.ninja.currentSelectedContainer; thingToPush.layerData.isSelected = true; thingToPush.layerData._isFirstDraw = true; thingToPush.layerData.created = true; - + thingToPush.layerData.stageElement = object; + if (this.checkable_animated.classList.contains("checked")) { thingToPush.layerData.isVisible = false; } @@ -1199,13 +1406,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { restoreLayer:{ value:function (ele) { - var newLayerName, thingToPush = this.createLayerTemplate(); + var stageElementName, + thingToPush = this.createLayerTemplate(); this.currentLayerNumber = this.currentLayerNumber + 1; -// newLayerName = "Layer " + this.currentLayerNumber; +// stageElementName = "Layer " + this.currentLayerNumber; // if(ele.dataset.storedLayerName){ -// newLayerName = ele.dataset.storedLayerName; +// stageElementName = ele.dataset.storedLayerName; // } if(ele.id){ thingToPush.layerData.layerName = ele.id; @@ -1213,17 +1421,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.layerID = this.currentLayerNumber; thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; thingToPush.parentElement = this.application.ninja.currentSelectedContainer; + if (this._openDoc) { + //thingToPush.layerData.elementsList.push(ele); + thingToPush.layerData.stageElement = ele; + } if (this.checkable_animated.classList.contains("checked")) { thingToPush.layerData.isVisible = false; } + // Are there styles to add? thingToPush.layerData.arrLayerStyles = this.createLayerStyles(); thingToPush.layerData.arrStyleTracks = this.createStyleTracks(); - if (this._openDoc) { - thingToPush.layerData.elementsList.push(ele); - } - + // Add the layer to the repetition this.temparrLayers.splice(0, 0, thingToPush); thingToPush.layerData.trackPosition = this.temparrLayers.length - 1; thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; @@ -1236,6 +1446,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { deleteLayer:{ value:function (arrElements) { // Only delete selected layers. If no layers are selected, do nothing. + // TODO: maybe this should use this.selectedElements instead of a call to querySelectorAll. var i = 0, arrLayers = document.querySelectorAll(".container-layers .container-layer"), arrLayersLength = arrLayers.length; @@ -1253,6 +1464,26 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + + deleteLayers: { + value: function(arrElements) { + var i = 0, + j = 0, + arrLayersLength = this.arrLayers.length, + arrElementsLength = arrElements.length; + + for (i = 0; i < arrElementsLength; i++) { + var currentTest = arrElements[i]; + for (j = 0; j < arrLayersLength; j++) { + if (this.arrLayers[j].layerData.stageElement == currentTest) { + this.arrLayers.splice(j, 1); + } + } + } + this.selectLayers([]); + this.resetMasterDuration(); + } + }, resetMasterDuration:{ value:function(){ @@ -1274,36 +1505,37 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleElementAdded:{ value:function() { - this.createNewLayer(this.application.ninja.selectedElements[0]); - + this.createstageElement(this.application.ninja.selectedElements[0]); +/* if (typeof(this.currentLayerSelected) === "undefined") { // Edge case: currentLayerSelected needs to be initialized. this.currentLayerSelected = {}; this.currentLayerSelected.layerData = {}; this.currentLayerSelected.layerData.elementsList = []; } - this.currentLayerSelected.layerData.elementsList.push(this.application.ninja.selectedElements[0]); - - // TODO: verify this is correct. + //this.currentLayerSelected.layerData.elementsList.push(this.application.ninja.selectedElements[0]); + // this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName; + this.selectedElements = []; this.selectedElements.push(this.application.ninja.selectedElements[0]); -// this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName; +*/ } }, handleElementsRemoved:{ value:function (event) { - var deleteElements = event.detail; - //console.log("TimelinePanel.handleElementsRemoved; event.detail is ", event.detail); - this.deleteLayer(deleteElements); + this.deleteLayers(event.detail); } }, handleElementReplaced:{ value:function(event){ + // TODO: this needs to be updated. Not sure when an elementReplaced event will be fired? + /* this.currentLayerSelected.layerData.elementsList.pop(); this.currentLayerSelected.layerData.elementsList.push(event.detail.data.newChild); this.currentLayerSelected.layerData.animatedElement = event.detail.data.newChild; + */ } }, @@ -1609,6 +1841,8 @@ console.log('TimelinePanel.selectLayer') event.dataTransfer.setDragImage(dragIcon, 0, 0); // Clone the element we're dragging + this.buildDragHelper(); + /* this._dragAndDropHelper = event.target.cloneNode(true); this._dragAndDropHelper.style.opacity = 0.8; this._dragAndDropHelper.style.position = "absolute"; @@ -1618,6 +1852,7 @@ console.log('TimelinePanel.selectLayer') this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width"); this._dragAndDropHelper.classList.add("timeline-dnd-helper"); + */ // Get the offset var findYOffset = function(obj) { @@ -1637,6 +1872,30 @@ console.log('TimelinePanel.selectLayer') this._deleteHelper = false; } }, + + buildDragHelper: { + value: function() { + var myContainer = document.createElement("div"), + i = 0, + currentLayersSelectedLength = this.currentLayersSelected.length; + + for (i = 0; i < currentLayersSelectedLength; i++) { + var currentClone = this.layerRepetition.childComponents[this.currentLayersSelected[i]].element.cloneNode(true); + currentClone.classList.add("layerSelected"); + myContainer.appendChild(currentClone); + this._dragLayerIndexes.push(this.currentLayersSelected[i]); + } + this._dragAndDropHelper = myContainer; + this._dragAndDropHelper.style.opacity = 0.8; + this._dragAndDropHelper.style.position = "absolute"; + this._dragAndDropHelper.style.top = "0px"; + this._dragAndDropHelper.style.left = "0px"; + this._dragAndDropHelper.style.zIndex = 700; + + this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width"); + this._dragAndDropHelper.classList.add("timeline-dnd-helper"); + } + }, handleLayerDragover: { value: function(event) { -- cgit v1.2.3 From d3e2e8c0e4be6a324eac3a3ea050b4c41183f79b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 17 May 2012 17:16:11 -0700 Subject: Timeline: Bug fixes for multiselect --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 1ddb3977..ce8174b0 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1200,7 +1200,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Select the layers, or clear the selection if none were found if (arrSelectedElements.length > 0) { - console.log("TimelinePanel.updateStageSelection, ", arrSelectedElements) this.application.ninja.selectionController.selectElements(arrSelectedElements); } else { this.application.ninja.selectionController.executeSelectElement(); @@ -1641,6 +1640,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { selectLayer:{ value:function (layerIndex, userSelection) { + console.log("=----> Please update your component to use the new TimelinePanel.selectLayers method. <----="); + this.selectLayers([layerIndex]); + if (userSelection === true) { + this.updateStageSelection(); + } + + /* console.log('TimelinePanel.selectLayer') @@ -1676,6 +1682,7 @@ console.log('TimelinePanel.selectLayer') this._captureSelection = true; } this.resetMasterDuration(); + */ } }, -- cgit v1.2.3 From ef499e92341c9bd6edbee70f86dc5a6fe8b461eb Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 17 May 2012 18:14:17 -0700 Subject: Timeline: More bug fixes and code cleanup for multiselect. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 340 +-------------------- 1 file changed, 10 insertions(+), 330 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index ce8174b0..d1f51d16 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -108,37 +108,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - _selectedLayerID:{ - value:false - }, - selectedLayerID:{ - get:function () { - return this._selectedLayerID; - }, - set:function (newVal) { - if (newVal === false) { - // We are clearing the timeline, so just set the value and return. - this._selectedLayerID = newVal; - return; - } - if (newVal !== this._selectedLayerID) { - var selectIndex = this.getLayerIndexByID(newVal); - this._selectedLayerID = newVal; - this._captureSelection = true; - if (this.currentLayerSelected !== false) { - this.selectLayer(selectIndex, true); - } - if (this.currentLayersSelected !== false) { - this.selectLayers(this.currentLayersSelected); - } - if ((this.currentLayersSelected === false) && (this.currentLayerSelected === false)) { - this.selectLayers([]); - } - - } - } - }, - _currentLayersSelected:{ value:[] }, @@ -151,6 +120,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.cacheTimeline(); } }, + // The index of the last layer that was clicked on // (used for shift-click multiselect) _lastLayerClicked : { @@ -265,7 +235,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { set:function (value) { if (this._breadCrumbContainer !== value) { this._breadCrumbContainer = value; - //this.LayerBinding(); } } }, @@ -350,17 +319,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { for (i = 0; i < dragLayerIndexesLength; i++) { var myDraggingLayer = this.arrLayers[this._dragLayerIndexes[i]]; arrDragLayers.push(myDraggingLayer); + // Splice arrLayers this.arrLayers.splice(this._dragLayerIndexes[i], 1); this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); } - console.log(arrDragLayers); - //this.arrLayers.splice(dropLayerIndex, 0, arrDragLayers); this.layersDragged = arrDragLayers; - console.log(this.layersDragged); - console.log(this.arrLayers); this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; + + // Cache the new info this.cacheTimeline(); + // Clear drag and drop variables for future re-use this._dropLayerID = null; this.dragLayerIndexes = []; this._dragLayerIndexes = []; @@ -370,27 +339,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // So just in case, set the draw routine to delete the helper. this._deleteHelper = true; this.needsDraw = true; - -/* - var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), - dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), - dragLayer = this.arrLayers[dragLayerIndex]; - this.layersDragged.push(dragLayer); - this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; - - this.arrLayers.splice(dragLayerIndex, 1); - this.arrLayers.splice(dropLayerIndex, 0, dragLayer); - this.cacheTimeline(); - - // Clear for future DnD - this._dropLayerID = null; - this._dragLayerID = null; - - // 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.needsDraw = true; -*/ } } }, @@ -428,6 +376,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value: false }, /* === END: Models === */ + /* =