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') 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') 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') 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 @@
-
+
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f32592ed..09378e65 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -348,6 +348,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:null }, + // Drag and Drop properties + _dragAndDropHelper : { + value: false + }, + _dragAndDropHelperCoords: { + value: false + }, + _dragAndDropHelperOffset : { + value: false + }, + _appendHelper: { + value: false + }, + _deleteHelper: { + value: false + }, + _trackData:{ value: false }, @@ -424,6 +441,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.ninjaStylesContoller = this.application.ninja.stylesController; this.element.addEventListener("click", this, false); this.eventManager.addEventListener("tlZoomSlider", this, false); + + this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); + this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false); + this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false); + this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); } }, @@ -436,6 +458,53 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; } } + + + + + + + + + // Drag and Drop: + // Do we have a helper to append? + if (this._appendHelper === true) { + this.track_lanes.appendChild(this._dragAndDropHelper); + this._appendHelper = false; + } + // Do we need to move the helper? + if (this._dragAndDropHelperCoords !== false) { + if (this._dragAndDropHelper !== null) { + if (typeof(this._dragAndDropHelper.style) !== "undefined") { + this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords; + } + } + this._dragAndDropHelperCoords = false; + } + // Do we have a helper to delete? + if (this._deleteHelper === true) { + if (this._dragAndDropHelper === null) { + // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. + // Try and recover the helper so we can delete it. + var myHelper = this.element.querySelector(".track-dnd-helper"); + if (myHelper != null) { + this._dragAndDropHelper = myHelper; + } + } + if (this._dragAndDropHelper !== null) { + // We need to delete the helper. Can we delete it from track_lanes? + if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) { + this.track_lanes.removeChild(this._dragAndDropHelper); + this._dragAndDropHelper = null; + this._deleteHelper = false; + } + } + } + + + + + } }, @@ -762,6 +831,92 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return returnVal; } }, + + // Drag and drop event handlers + handleKeyframeDragstart : { + value: function(event) { + var dragIcon = document.createElement("img"); + event.dataTransfer.effectAllowed = 'move'; + event.dataTransfer.setData('Text', this.identifier); + dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=" + dragIcon.width = 1; + event.dataTransfer.setDragImage(dragIcon, 0, 0); + + // Clone the element we're dragging + this._dragAndDropHelper = event.target.cloneNode(true); + this._dragAndDropHelper.style.opacity = 0.8; + this._dragAndDropHelper.style.position = "absolute"; + this._dragAndDropHelper.style.top = "2px"; + 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("track-dnd-helper"); + + // Get the offset + var findYOffset = function(obj) { + var curleft = curtop = 0; + + if (obj.offsetParent) { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + + } while (obj = obj.offsetParent); + } + return curtop; + } + //this._dragAndDropHelperOffset = findYOffset(this.container_layers); + this._appendHelper = true; + this._deleteHelper = false; + } + }, + handleKeyframeDragover: { + value: function(event) { + var currPos = 0; + /* + myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; + if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) { + this._scrollTracks = (this.user_layers.scrollTop - 10) + } + if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) { + this._scrollTracks = (this.user_layers.scrollTop - 20) + } + if ((myScrollTest > (this.user_layers.clientHeight + 10))) { + this._scrollTracks = (this.user_layers.scrollTop + 10) + } + if ((myScrollTest > (this.user_layers.clientHeight + 20))) { + this._scrollTracks = (this.user_layers.scrollTop + 20) + + } + */ + //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28; + currPos = event.x - 280; + this._dragAndDropHelperCoords = currPos + "px"; + this.needsDraw = true; + } + }, + + handleKeyframeDragend : { + value: function(event) { + this._deleteHelper = true; + this.needsDraw = true; + + } + }, + + handleKeyframeDrop : { + value: function(event) { + event.stopPropagation(); + //this.element.classList.remove("dragOver"); + //if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { + //this.parentComponent.parentComponent.dropLayerID = this.layerID; + //} + return false; + } + }, + + /* Begin: Logging routines */ _boolDebug: { enumerable: false, -- cgit v1.2.3 From d582eb28c04eb8e1f1fa7a729ee20f2e7a0fb935 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 3 May 2012 16:47:18 -0700 Subject: Timeline: Bug fix: Master Duration not updating when all documents are closed. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 80baffc8..cbd89b47 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -177,7 +177,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, set:function (val) { this._masterDuration = val; - this.timebar.style.width = (this._masterDuration / 12) + "px"; + var intDur = Math.round(val/12), + strWidth = intDur + "px"; + this.timebar.style.width = strWidth; } }, @@ -515,8 +517,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { "deleteLayer", "elementAdded", "elementsRemoved", - "elementReplaced", - "selectionChange"], + "elementReplaced"], + //"selectionChange"], i, arrEventsLength = arrEvents.length; @@ -690,12 +692,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._openDoc = false; this.end_hottext.value = 25; this.updateTrackContainerWidth(); - this.masterDuration = 0; // Clear the repetitions if (this.arrLayers.length > 0) { this.arrLayers = []; this.arrLayers.length = 0; } + this.resetMasterDuration(); } }, -- cgit v1.2.3 From 7fc185cc08b2ba912dbc7bce96f6a465c1dd6dbf Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 3 May 2012 18:06:06 -0700 Subject: Timeline: More work on tween drag-and-drop --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 23 +++++++++++++++++++++- js/panels/Timeline/Tween.reel/Tween.js | 2 ++ 2 files changed, 24 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 09378e65..d5571c3c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -442,6 +442,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.element.addEventListener("click", this, false); this.eventManager.addEventListener("tlZoomSlider", this, false); + // Drag and Drop event handlers this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false); this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false); @@ -873,6 +874,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, handleKeyframeDragover: { value: function(event) { + event.preventDefault(); var currPos = 0; /* myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; @@ -891,9 +893,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } */ //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28; - currPos = event.x - 280; + currPos = event.x - 277; this._dragAndDropHelperCoords = currPos + "px"; this.needsDraw = true; + return false; } }, @@ -912,6 +915,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { //if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { //this.parentComponent.parentComponent.dropLayerID = this.layerID; //} + + /* + * First, what keyframe is it (get the index); + * Limit keyframe position to between index-1 and index+1 keyFramePosition + * On update, be sure to update index+1's information too + * + */ + + var currPos = event.x - 277, + currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80), + currentMillisec = currentMillisecPerPixel * currPos; + console.log(this.tweens[1].tweenData); + this.tweens[1].tweenData.spanWidth = currPos - this.tweens[0].tweenData.keyFramePosition; + this.tweens[1].tweenData.keyFramePosition = currPos; + this.tweens[1].tweenData.keyFrameMillisec = currentMillisec; + this.tweens[1].tweenData.spanPosition = currPos - this.tweens[1].tweenData.spanWidth; + this.tweenRepetition.childComponents[1].setData(); + console.log(this.tweens[1].tweenData); return false; } }, diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 8b6826ed..b4c3bd86 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -136,6 +136,7 @@ var Tween = exports.Tween = Montage.create(Component, { draw:{ value:function () { + console.log("Tween.draw") this.element.style.left = this.spanPosition + "px"; this.keyframe.position = this.spanWidth; this.tweenspan.spanWidth = this.spanWidth; @@ -147,6 +148,7 @@ var Tween = exports.Tween = Montage.create(Component, { setData:{ value:function(){ + console.log("Tween.setData") this.spanWidth = this.tweenData.spanWidth; this.keyFramePosition = this.tweenData.keyFramePosition; this.spanPosition = this.tweenData.spanPosition; -- cgit v1.2.3 From 54fd77320dcce93987c138923bcb8a9b9899c4c0 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 3 May 2012 23:09:48 -0700 Subject: apply old stash to new branch initial work and stubs for sub property support. serialization for property track components and classes Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.html | 40 +++++++- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 113 +++++++++++++++++++++ .../PropertyTrack.reel/css/PropertyTrack.css | 9 +- .../PropertyTrack.scssc | Bin 0 -> 5151 bytes .../PropertyTrack.reel/scss/PropertyTrack.scss | 6 ++ .../Timeline/TimelineTrack.reel/TimelineTrack.html | 9 +- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 11 +- 7 files changed, 176 insertions(+), 12 deletions(-) create mode 100644 js/panels/Timeline/PropertyTrack.reel/scss/.sass-cache/a26ed2cbe268f8c721d1b1d8dfa075c8c5b47e72/PropertyTrack.scssc (limited to 'js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html index a4b598c5..40834466 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html @@ -13,16 +13,50 @@ "owner": { "prototype": "js/panels/Timeline/PropertyTrack.reel", "properties": { - "element": {"#": "property-track"} + "element": {"#": "property-track"}, + "propTweenRepetition" : {"@" : "propTweenRepetition"}, + "propTween": {"@" : "propTween"} } - } + }, + + "propTween" : { + "prototype" : "js/panels/timeline/Tween.reel", + "properties" : { + "element":{"#": "prop_track_lane"} + }, + "bindings" : { + "tweenData" : { + "boundObject" : {"@": "propTweenRepetition"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenData", + "oneway" : false + } + } + }, + "propTweenRepetition": { + "prototype": "montage/ui/repetition.reel", + "properties": { + "element": {"#": "prop_track_lanes"}, + "isSelectionEnabled" : false + }, + "bindings": { + "objects": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "propTweens", + "oneway": false + } + } + } } -
+
+
+
+
+
\ No newline at end of file diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 175b77f9..8f7745e5 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -15,6 +15,119 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { prepareForDraw:{ value:function(){ + this.element.addEventListener("click", this, false); + } + }, + + draw:{ + value:function(){ + + } + }, + + _propTweenRepetition:{ + value:null + }, + + propTweenRepetition:{ + serializable:true, + get:function () { + return this._propTweenRepetition; + }, + set:function (newVal) { + this._propTweenRepetition = newVal; + } + }, + + _propTweens:{ + value:[] + }, + + propTweens:{ + serializable:true, + get:function () { + return this._propTweens; + }, + set:function (newVal) { + this._propTweens = newVal; + } + }, + + nextKeyframe:{ + value:1 + }, + + handleClick:{ + value:function(ev){ + var parentTrackID = this.parentComponent.parentComponent.parentComponent.trackID; + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(parentTrackID); + //console.log(this.application.ninja.timeline.arrLayers[selectedIndex].layerData); + this.application.ninja.timeline.selectLayer(selectedIndex, true); + + if (ev.shiftKey) { + if (this.propTweens.length < 1) { + this.insertPropTween(0); + this.addPropAnimationRuleToElement(ev); + this.updatePropKeyframeRule(); + } else { + this.handleNewPropTween(ev); + this.updatePropKeyframeRule(); + } + } + } + }, + + handleNewPropTween:{ + value:function(ev){ + this.insertPropTween(ev.offsetX); + } + }, + + insertPropTween:{ + value:function(clickPos){ + var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + var currentMillisec = currentMillisecPerPixel * clickPos; + + var newTween = {}; + newTween.tweenData = {}; + + if (clickPos == 0) { + newTween.tweenData.spanWidth = 0; + newTween.tweenData.keyFramePosition = 0; + newTween.tweenData.keyFrameMillisec = 0; + newTween.tweenData.tweenID = 0; + newTween.tweenData.spanPosition = 0; + newTween.tweenData.tweenedProperties = []; + + this.propTweens.push(newTween); + + } else { + newTween.tweenData.spanWidth = clickPos - this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition; + newTween.tweenData.keyFramePosition = clickPos; + newTween.tweenData.keyFrameMillisec = currentMillisec; + newTween.tweenData.tweenID = this.nextKeyframe; + newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; + newTween.tweenData.tweenedProperties = []; + + this.propTweens.push(newTween); + + this.nextKeyframe += 1; + } + + this.application.ninja.documentController.activeDocument.needsSave = true; + } + }, + + updatePropKeyframeRule:{ + value:function(){ + + } + }, + + addPropAnimationRuleToElement:{ + value:function(tweenEvent){ + console.log("SECOND PROP TWEEN ADDING at " + tweenEvent.offsetX); + this.insertPropTween(tweenEvent.offsetX); } } diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css index cb119a14..ddcc536e 100644 --- a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css +++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css @@ -9,11 +9,18 @@ /* line 19, ../scss/PropertyTrack.scss */ .content-main .collapsible-content .timeline-track { height: 20px; + padding-top: 2px; border-bottom: 1px solid #505050; background-image: url("../images/gridline.jpg"); } -/* line 26, ../scss/PropertyTrack.scss */ +/* line 27, ../scss/PropertyTrack.scss */ .timeline-track .content-main { background-color: #474747; } + +/* line 31, ../scss/PropertyTrack.scss */ +.prop-track .collapsible-content.collapsible-collapsed { + overflow: hidden; + height: 0px; +} diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/.sass-cache/a26ed2cbe268f8c721d1b1d8dfa075c8c5b47e72/PropertyTrack.scssc b/js/panels/Timeline/PropertyTrack.reel/scss/.sass-cache/a26ed2cbe268f8c721d1b1d8dfa075c8c5b47e72/PropertyTrack.scssc new file mode 100644 index 00000000..38b8b6fe Binary files /dev/null and b/js/panels/Timeline/PropertyTrack.reel/scss/.sass-cache/a26ed2cbe268f8c721d1b1d8dfa075c8c5b47e72/PropertyTrack.scssc differ diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss index c7ae6f0c..31aed851 100644 --- a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss +++ b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss @@ -18,6 +18,7 @@ .content-main .collapsible-content .timeline-track { height: 20px; + padding-top: 2px; border-bottom: 1px solid $color-menu-divider; background-image: url("../images/gridline.jpg"); } @@ -26,3 +27,8 @@ .timeline-track .content-main { background-color: $color-menu-bg; } + +.prop-track .collapsible-content.collapsible-collapsed { + overflow: hidden; + height: 0px; +} \ No newline at end of file diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 44ad9abb..3936328e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -52,7 +52,6 @@ } } }, - "styleTrackRepetition": { "prototype": "montage/ui/repetition.reel", "properties": { @@ -67,6 +66,12 @@ } } }, + "stylePropertyTrack" : { + "prototype" : "js/panels/Timeline/PropertyTrack.reel", + "properties" : { + "element":{"#": "style-track-base"} + } + }, "positionTracksRepetition": { "prototype": "montage/ui/repetition.reel", "properties": { @@ -236,7 +241,7 @@
-
+
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index efeeba00..000c81e2 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -218,10 +218,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { tweenRepetition:{ get:function () { - return this._spanRepetition; + return this._tweenRepetition; }, set:function (newVal) { - this._spanRepetition = newVal; + this._tweenRepetition = newVal; } }, @@ -371,7 +371,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.bypassAnimation = this.trackData.bypassAnimation; this.trackID = this.trackData.layerID; this.tweens = this.trackData.tweens; - this.animatedElement = this.trackData.animatedElement; // unneeded with one element per layer restriction + this.animatedElement = this.trackData.animatedElement; this.arrStyleTracks = this.trackData.arrStyleTracks; this.isTrackAnimated = this.trackData.isTrackAnimated; this.trackDuration = this.trackData.trackDuration; @@ -431,7 +431,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; } } - } }, @@ -443,7 +442,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (selectedIndex !== false) { if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { this.retrieveStoredTweens(); - } } } @@ -507,6 +505,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.updateKeyframeRule(); } } else { + // TEMP error check console.log("There must be exactly one element in an animated layer."); } } @@ -528,7 +527,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { insertTween:{ value:function (clickPos) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.selectLayer(selectedIndex, true); + this.application.ninja.timeline.selectLayer(selectedIndex, true); var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; -- cgit v1.2.3 From 16f95cb8c70608eeede6c9e0834b184ade6c7752 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 02:21:58 -0700 Subject: update data bindings for subproperty tracks Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 54 +++++++++++++++++++++- .../Timeline/TimelineTrack.reel/TimelineTrack.html | 9 +++- 2 files changed, 60 insertions(+), 3 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 8f7745e5..83d4ce73 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -16,6 +16,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { prepareForDraw:{ value:function(){ this.element.addEventListener("click", this, false); + this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; + this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; } }, @@ -29,6 +31,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:null }, + animatedElement:{ + value:null + }, + propTweenRepetition:{ serializable:true, get:function () { @@ -53,10 +59,56 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + _propTrackData:{ + value:false + }, + + propTrackData:{ + get:function () { + return this._propTrackData; + }, + set:function (val) { + this._propTrackData = val; + if (this._propTrackData) { + this.setData(); + } + } + }, + + setData:{ + value:function(){ + if (typeof(this.propTrackData) === "undefined") { + return; + } + + + this.propTweens = this.propTrackData.propTweens; + + this.needsDraw = true; + } + }, + nextKeyframe:{ value:1 }, + _trackID:{ + value:null + }, + + trackID:{ + serializable:true, + get:function () { + return this._trackID; + }, + set:function (value) { + if (value !== this._trackID) { + this._trackID = value; + this.propTrackData.layerID = value; + } + } + }, + handleClick:{ value:function(ev){ var parentTrackID = this.parentComponent.parentComponent.parentComponent.trackID; @@ -126,9 +178,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ - console.log("SECOND PROP TWEEN ADDING at " + tweenEvent.offsetX); this.insertPropTween(tweenEvent.offsetX); - } } }); diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 3936328e..de2969bb 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -70,7 +70,14 @@ "prototype" : "js/panels/Timeline/PropertyTrack.reel", "properties" : { "element":{"#": "style-track-base"} - } + }, + "bindings" : { + "trackData" : { + "boundObject" : {"@" : "styleTrackRepetition"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.propTrackData", + "oneway" : false + } + } }, "positionTracksRepetition": { "prototype": "montage/ui/repetition.reel", -- cgit v1.2.3 From 0e12f00d6afffabd370347335a56d0ddd17c0232 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 11:00:12 -0700 Subject: Fix subproperty keyframe selection Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 12 ++++++++---- js/panels/Timeline/Tween.reel/Tween.js | 18 ++++++++++++------ 2 files changed, 20 insertions(+), 10 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 83d4ce73..60da4e71 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -35,6 +35,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value:null }, + isSubproperty:{ + value:true + }, + propTweenRepetition:{ serializable:true, get:function () { @@ -111,11 +115,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { handleClick:{ value:function(ev){ - var parentTrackID = this.parentComponent.parentComponent.parentComponent.trackID; - var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(parentTrackID); //console.log(this.application.ninja.timeline.arrLayers[selectedIndex].layerData); - this.application.ninja.timeline.selectLayer(selectedIndex, true); - if (ev.shiftKey) { if (this.propTweens.length < 1) { this.insertPropTween(0); @@ -137,6 +137,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { insertPropTween:{ value:function(clickPos){ + var parentTrackID = this.parentComponent.parentComponent.parentComponent.trackID; + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(parentTrackID); + this.application.ninja.timeline.selectLayer(selectedIndex, true); + var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 8b6826ed..45714079 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -225,6 +225,8 @@ var Tween = exports.Tween = Montage.create(Component, { selectTween:{ value: function(){ + console.log("tween select"); + // turn on event listener for element change this.eventManager.addEventListener("elementChange", this, false); @@ -243,13 +245,17 @@ var Tween = exports.Tween = Montage.create(Component, { var currentMillisec = currentMillisecPerPixel * this.keyFramePosition; this.application.ninja.timeline.updateTimeText(currentMillisec); - // move animated element to correct position on stage - var currentTop = this.tweenedProperties["top"] + "px"; - var currentLeft = this.tweenedProperties["left"] + "px"; - - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); + if(this.parentComponent.parentComponent.isSubproperty){ + console.log("sub prop tween selection"); + // set property specific style on element + } else { + // move animated element to correct position on stage + var currentTop = this.tweenedProperties["top"] + "px"; + var currentLeft = this.tweenedProperties["left"] + "px"; + this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); + this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); + } } }, -- cgit v1.2.3 From 8964e070fa760d23c2de272ca36b8d9beba6007d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 4 May 2012 12:55:23 -0700 Subject: Timeline: More fixes to selection changing and document switching. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 45 +++++++++++++++++----- 1 file changed, 36 insertions(+), 9 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 48818e44..cb4fbf07 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -329,6 +329,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { useAbsolutePosition:{ value:true }, + _currentDocumentUuid: { + value: false + }, + _ignoreSelectionChanges: { + value: false + }, /* === END: Models === */ /* === BEGIN: Draw cycle === */ prepareForDraw:{ @@ -584,6 +590,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.drawTimeMarkers(); // Document switching // Check to see if we have saved timeline information in the currentDocument. + //console.log("TimelinePanel.initTimelineForDocument"); + if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) { //console.log('TimelinePanel.initTimelineForDocument: new Document'); // No, we have no information stored. @@ -609,12 +617,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Draw the repetition. this.arrLayers = this.temparrLayers; this.currentLayerNumber = this.arrLayers.length; + this._currentDocumentUuid = this.application.ninja.currentDocument.uuid; boolAlreadyInitialized = true; } else if (this.application.ninja.currentDocument.setLevel) { //console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick'); // Information stored, but we're moving up or down in the breadcrumb. // Get the current selection and restore timeline info for its children. + //debugger; var parentNode = this.application.ninja.currentSelectedContainer, storedCurrentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; this.temparrLayers = []; @@ -650,6 +660,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._currentDocumentUuid = this.application.ninja.currentDocument.uuid; //debugger; @@ -710,12 +721,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleDocumentChange:{ value:function () { + // console.log("TimelinePanel.handleDocumentChange"); + if (this.application.ninja.currentDocument == null) { // On app initialization, the binding is triggered before // there is a currentDocument. We don't do anything at that time. return; } - // this.application.ninja.currentDocument.setLevel = true; + + // Is this the same document? + if (this._currentDocumentUuid === this.application.ninja.currentDocument.uuid) { + // Yes, same document, so we are changing levels. + this.application.ninja.currentDocument.setLevel = true; + this._ignoreSelectionChanges = true; + } + this._boolCacheArrays = false; this.clearTimelinePanel(); this._boolCacheArrays = true; @@ -799,15 +819,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrLayersLength = this.arrLayers.length, intNumSelected = this.application.ninja.selectedElements.length, checkIndex = 0; - - this.deselectTweens(); - //console.log("TimelinePanel.handleSelectionChange") + + //console.log("TimelinePanel.handleSelectionChange, intNumSelected is ", intNumSelected) + if (intNumSelected === 0) { - this.selectLayers([]); + if (this._ignoreSelectionChanges !== true) { + this.selectLayers([]); + } else { + this._ignoreSelectionChanges = false; + } + this.currentLayerSelected = false; this.currentLayersSelected = false; } - + if (intNumSelected === 1) { this.currentLayersSelected = false; if (this.application.ninja.selectedElements[0]) { @@ -858,7 +883,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { //console.log(arrSelectedIndexes); - + if (this.selectedKeyframes) { this.deselectTweens(); } @@ -867,8 +892,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.arrLayers[i].layerData.isSelected = false; this.triggerLayerBinding(i); } - - this.currentLayersSelected = false; + + if (this.currentLayersSelected !== false) { + this.currentLayersSelected = false; + } if (arrSelectedIndexesLength > 0) { this.currentLayersSelected = []; } -- cgit v1.2.3 From 0d33ff651baf062b8e82f3a89b69b3ccae0cbe47 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 4 May 2012 15:01:47 -0700 Subject: Timeline: Restore event handler for selectionChange. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 3fc8eeaf..03db7880 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -533,8 +533,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { "deleteLayer", "elementAdded", "elementsRemoved", - "elementReplaced"], - //"selectionChange"], + "elementReplaced", + "selectionChange"], i, arrEventsLength = arrEvents.length; -- cgit v1.2.3 From 2ea8a62835f4c20efff2623306e7205e6f5bf0ba Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 4 May 2012 16:59:07 -0700 Subject: Timeline: True drag-and-drop of keyframes --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 7 +++ .../Timeline/TimelineTrack.reel/TimelineTrack.js | 60 ++++++++++++++++++---- js/panels/Timeline/Tween.reel/Tween.js | 16 +++++- 3 files changed, 71 insertions(+), 12 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index df5bdd67..f7259d29 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -36,6 +36,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { 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); + this.element.addEventListener("dragend", this.handleDragend.bind(this), false); @@ -83,7 +84,13 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { value: function(event) { //this.parentComponent.parentComponent.dragLayerID = this.layerID; event.dataTransfer.setData('Text', 'Keyframe'); + this.parentComponent.parentComponent.parentComponent.draggingIndex = this.parentComponent.tweenID; } }, + handleDragend: { + value: function(event) { + this.parentComponent.isDragging = false; + } + } }); diff --git a/js/panels/Timeline/TimelineTrack.reel/Tim