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(-) 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(-) 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(-) 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(-) 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 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(-) 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(-) 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(-) 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/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index d5571c3c..836bb60f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -836,7 +836,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // Drag and drop event handlers handleKeyframeDragstart : { value: function(event) { - var dragIcon = document.createElement("img"); + var dragIcon = document.createElement("img"), + minPosition = 0, + maxPosition = 100000000000; + event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('Text', this.identifier); dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=" @@ -868,6 +871,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return curtop; } //this._dragAndDropHelperOffset = findYOffset(this.container_layers); + if (this.draggingIndex !== (this.tweens.length -1)) { + maxPosition = this.tweenRepetition.childComponents[this.draggingIndex +1].keyFramePosition; + } + if (this.draggingIndex > 1) { + minPosition = this.tweenRepetition.childComponents[this.draggingIndex -1].keyFramePosition; + } + this._keyframeMinPosition = minPosition+2; + this._keyframeMaxPosition = maxPosition-9; this._appendHelper = true; this._deleteHelper = false; } @@ -894,6 +905,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { */ //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28; currPos = event.x - 277; + + // too much or too little? + if (currPos < this._keyframeMinPosition) { + currPos = this._keyframeMinPosition; + } + if (currPos > this._keyframeMaxPosition) { + currPos = this._keyframeMaxPosition; + } + this._dragAndDropHelperCoords = currPos + "px"; this.needsDraw = true; return false; @@ -923,16 +943,36 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { * */ - var currPos = event.x - 277, + var currPos = event.x - 274, 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); + currentMillisec = 0, + i = 0, + tweenIndex = this.draggingIndex; + + // too much or too little? + if (currPos < this._keyframeMinPosition) { + currPos = this._keyframeMinPosition + 3; + } + if (currPos > this._keyframeMaxPosition) { + currPos = this._keyframeMaxPosition + 3; + } + + currentMillisec = currentMillisecPerPixel * currPos; + + this.tweens[tweenIndex].tweenData.spanWidth = currPos - this.tweens[tweenIndex - 1].tweenData.keyFramePosition; + this.tweens[tweenIndex].tweenData.keyFramePosition = currPos; + this.tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec; + this.tweens[tweenIndex].tweenData.spanPosition = currPos - this.tweens[tweenIndex].tweenData.spanWidth; + this.tweenRepetition.childComponents[tweenIndex].setData(); + if (tweenIndex < this.tweens.length -1) { + var spanWidth = this.tweens[tweenIndex +1].tweenData.keyFramePosition - currPos; + var spanPosition = currPos; + this.tweens[tweenIndex +1].tweenData.spanWidth = spanWidth; + this.tweens[tweenIndex +1].tweenData.spanPosition = currPos; + this.tweenRepetition.childComponents[tweenIndex+1].setData(); + } + this.tweenRepetition.childComponents[tweenIndex].selectTween(); + this.updateKeyframeRule(); return false; } }, diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index b4c3bd86..c21b5f91 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -132,11 +132,24 @@ var Tween = exports.Tween = Montage.create(Component, { this._isTweenAnimated = value; } }, + + _isDragging: { + value: false + }, + isDragging: { + serializable: true, + get:function () { + return this._isDragging; + }, + set:function (newVal) { + this._isDragging = newVal; + } + + }, draw:{ value:function () { - console.log("Tween.draw") this.element.style.left = this.spanPosition + "px"; this.keyframe.position = this.spanWidth; this.tweenspan.spanWidth = this.spanWidth; @@ -148,7 +161,6 @@ 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