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') 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 8c1fda5e59b9d88b69e0b4a2bd57590ef451643c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 1 May 2012 15:28:05 -0700 Subject: Timeline: Expand/collapse state of layers now mantained across document switching. --- js/panels/Timeline/Collapser.js | 2 -- js/panels/Timeline/Layer.reel/Layer.js | 31 ++++++++++++++++++++- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 32 ++++++++++++++++++++++ 3 files changed, 62 insertions(+), 3 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index 88314c8b..9c8d4434 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js @@ -151,7 +151,6 @@ var Montage = require("montage/core/core").Montage, // isToggling: Bindable property. Set this (to anything) to trigger a toggle. _isToggling: { - serializable: true, value: true }, isToggling: { @@ -179,7 +178,6 @@ var Montage = require("montage/core/core").Montage, prepareForDraw: { value: function() { - // Get the original value of the overflow property: this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); if (this.isCollapsed === false) { diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index b23da749..34c300df 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -471,7 +471,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dtextScaleX = this.layerData.dtextScaleX; this.dtextScaleY = this.layerData.dtextScaleY; this.dtextRotate = this.layerData.dtextRotate; - this._isFirstDraw = this.layerData._isFirstDraw; + //this._isFirstDraw = this.layerData._isFirstDraw; this.layerTag = this.layerData.layerTag; this.isVisible = this.layerData.isVisible; this.isAnimated = this.layerData.isAnimated; @@ -545,6 +545,9 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); this.element.addEventListener("drop", this.handleDrop.bind(this), false); + + + } }, draw: { @@ -570,7 +573,33 @@ var Layer = exports.Layer = Montage.create(Component, { } this._isFirstDraw = false; this.layerData._isFirstDraw = false; + + if (this.isMainCollapsed === false) { + this.mainCollapser.myContent.style.height = "auto"; + this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass); + this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass); + + } + if (this.isPositionCollapsed === false) { + this.positionCollapser.myContent.style.height = "auto"; + this.positionCollapser.myContent.classList.remove(this.positionCollapser.collapsedClass); + this.positionCollapser.clicker.classList.remove(this.positionCollapser.collapsedClass); + } + if (this.isTransformCollapsed === false) { + this.transformCollapser.myContent.style.height = "auto"; + this.transformCollapser.myContent.classList.remove(this.transformCollapser.collapsedClass); + this.transformCollapser.clicker.classList.remove(this.transformCollapser.collapsedClass); + } + if (this.isStyleCollapsed === false) { + this.styleCollapser.myContent.style.height = "auto"; + this.styleCollapser.myContent.classList.remove(this.styleCollapser.collapsedClass); + this.styleCollapser.clicker.classList.remove(this.styleCollapser.collapsedClass); + } + } + + + } }, /* End: Draw cycle */ diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index efeeba00..f32592ed 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -31,6 +31,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } }, + + _isFirstDraw: { + value: true + }, + _isVisible:{ value: true }, @@ -448,6 +453,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } } + + + if (this._isFirstDraw === true) { + + if (this.isMainCollapsed === false) { + this._mainCollapser.myContent.style.height = "auto"; + this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass); + this._mainCollapser.clicker.classList.remove(this._mainCollapser.collapsedClass); + } + if (this.isPositionCollapsed === false) { + this._positionCollapser.myContent.style.height = "auto"; + this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass); + this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass); + } + if (this.isTransformCollapsed === false) { + this._transformCollapser.myContent.style.height = "auto"; + this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass); + this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass); + } + if (this.isStyleCollapsed === false) { + this._styleCollapser.myContent.style.height = "auto"; + this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass); + this._styleCollapser.clicker.classList.remove(this._styleCollapser.collapsedClass); + } + this._isFirstDraw = false; + } + } }, -- cgit v1.2.3 From 73c4f7f449ba58e70f7335ef932b23dd450c925b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 1 May 2012 17:46:09 -0700 Subject: Timeline: Initial keyframe drag-and-drop interaction. --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 30 +++- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 1 + .../Timeline/TimelinePanel.reel/TimelinePanel.js | 6 + .../Timeline/TimelineTrack.reel/TimelineTrack.html | 3 +- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 155 +++++++++++++++++++++ 5 files changed, 193 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 859cdfb1..df5bdd67 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -31,6 +31,16 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { prepareForDraw:{ value:function(){ this.element.addEventListener("click", this, false); + + // Drag and drop event handlers + this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); + this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); + this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); + + + + + } }, @@ -57,5 +67,23 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { value:function(ev){ this.selectKeyframe(); } - } + }, + + handleMouseover: { + value: function(event) { + this.element.draggable = true; + } + }, + handleMouseout: { + value: function(event) { + this.element.draggable = false; + } + }, + handleDragstart: { + value: function(event) { + //this.parentComponent.parentComponent.dragLayerID = this.layerID; + event.dataTransfer.setData('Text', 'Keyframe'); + } + }, + }); diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 19709ca7..8ddc81cd 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -31,6 +31,7 @@ "container_tracks" : {"#" : "container-tracks"}, "end_hottext" : {"@" : "endHottext"}, "container_layers" : {"#" : "container-layers"}, + "container_tracks" : {"#" : "container-tracks"}, "timeline_disabler" : {"#" : "timeline-disabler"}, "checkable_relative" : {"#" : "checkable_relative"}, "checkable_absolute" : {"#" : "checkable_absolute"}, diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 6e64cde0..80baffc8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -336,6 +336,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); // Bind the handlers for the config menu @@ -1471,6 +1472,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.needsDraw = true; } }, + handleKeyframeDragover: { + value: function(event) { + + } + }, handleLayerDragEnd : { value: function(event) { this._deleteHelper = true; diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 44ad9abb..d416de5f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -16,6 +16,7 @@ "element": {"#": "track"}, "tweenRepetition" : {"@" : "tweenRepetition"}, "styleTracksRepetition" : {"@" : "styleTracksRepetition"}, + "track_lanes" : {"#" : "track_lanes"}, "tween": {"@" : "tween"}, "_mainCollapser" : {"@" : "mainCollapser"}, "_positionCollapser" : {"@" : "positionCollapser"}, @@ -215,7 +216,7 @@