From b50b720e7b34cea86e9aabfb27e843376508b00e Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 28 Jun 2012 09:48:44 -0700 Subject: Timeline: Better deselection of tweens when selecting/deselecting layers. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 45 +++++++++++++++------- 1 file changed, 32 insertions(+), 13 deletions(-) diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 50171260..87cf1e4f 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1217,20 +1217,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrCurrentElementsSelected = []; var matchedValues = 0; - for(i=0;i --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 61 +--------------------- 1 file changed, 1 insertion(+), 60 deletions(-) diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 3d31a50b..b0ab3b19 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1211,63 +1211,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { j = 0, arrLayersLength = this.arrLayers.length, arrSelectedIndexesLength = arrSelectedIndexes.length, - currentLayersSelectedLength = this.currentLayersSelected.length, - boolContinue = false, arrSelectedLayers = false, arrCurrentElementsSelected = []; - var matchedValues = 0; - - /* - if (arrSelectedIndexesLength !== 0) { - for(i=0;i 0) { -- cgit v1.2.3 From 72bc34c58d52db0cc7eb1e5b647e9e4aa697a4c0 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Thu, 28 Jun 2012 10:24:07 -0700 Subject: Bug Fix : Hot text updates with keyframe selection Signed-off-by: Kruti Shah --- js/panels/Timeline/Layer.reel/Layer.js | 85 ++++++++++++++-------------------- 1 file changed, 36 insertions(+), 49 deletions(-) diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index b4833fa2..4dd9e88a 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -1046,28 +1046,25 @@ var Layer = exports.Layer = Montage.create(Component, { handleLeftChange: { value: function(event) { - var prevPosition; - if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){ - if(!event.wasSetByCode) { - if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; - this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition); - this.savedPosition = null; - } + var prevPosition; + if(!event.wasSetByCode) { + if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition); + this.savedPosition = null; } } }, handleTopChange: { value: function(event) { - var prevPosition; - if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){ - if(!event.wasSetByCode) { - if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + var prevPosition; - this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition); - this.savedPosition = null; - } + if(!event.wasSetByCode) { + if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + + this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition); + this.savedPosition = null; } } }, @@ -1075,13 +1072,12 @@ var Layer = exports.Layer = Montage.create(Component, { handleWidthChange:{ value: function(event) { var prevPosition; - if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){ - if(!event.wasSetByCode) { - if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; - this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition); - this.savedPosition = null; - } + if(!event.wasSetByCode) { + if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + + this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition); + this.savedPosition = null; } } }, @@ -1089,13 +1085,12 @@ var Layer = exports.Layer = Montage.create(Component, { handleHeightChange:{ value: function(event) { var prevPosition; - if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){ - if(!event.wasSetByCode) { - if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; - this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline", prevPosition); - this.savedPosition = null; - } + if(!event.wasSetByCode) { + if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + + this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline", prevPosition); + this.savedPosition = null; } } }, @@ -1103,11 +1098,9 @@ var Layer = exports.Layer = Montage.create(Component, { handleLeftChanging: { value: function(event) { - if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){ - if(!event.wasSetByCode) { - if(!this.savedPosition) this.savedPosition = this.leftPosition; - this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "timeline"); - } + if(!event.wasSetByCode) { + if(!this.savedPosition) this.savedPosition = this.leftPosition; + this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "timeline"); } } @@ -1115,37 +1108,31 @@ var Layer = exports.Layer = Montage.create(Component, { handleTopChanging: { value: function(event) { - if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){ - if(!event.wasSetByCode) { - if(!this.savedPosition) this.savedPosition = this.topPosition; - this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "timeline"); - } - } + if(!event.wasSetByCode) { + if(!this.savedPosition) this.savedPosition = this.topPosition; + this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "timeline"); + } } }, handleWidthChanging:{ value: function(event) { - if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){ - if(!event.wasSetByCode) { - if(!this.savedPosition) this.savedPosition = this.dtextScaleX; - this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline"); - } - } + if(!event.wasSetByCode) { + if(!this.savedPosition) this.savedPosition = this.dtextScaleX; + this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline"); + } } }, handleHeightChanging:{ value: function(event) { - if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){ - if(!event.wasSetByCode) { - if(!this.savedPosition) this.savedPosition = this.dtextScaleY; - this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline"); - } - } + if(!event.wasSetByCode) { + if(!this.savedPosition) this.savedPosition = this.dtextScaleY; + this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline"); + } } }, -- cgit v1.2.3 From 3487d0596ff64a3bfbfc00e8187e34d9eb2ba0ab Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 29 Jun 2012 13:23:30 -0700 Subject: Timeline: Bug fix: IKNINJA-1857, "Using keyboard shortcut for chrome-preview causes each layer in the timeline to remain selected even when clicking on another layer." --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 23 ++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index b0ab3b19..4c349247 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1369,8 +1369,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { targetIndex = 0, isAlreadySelected = false, indexAlreadySelected = 0, - indexLastClicked = 0; - + indexLastClicked = 0, + ua = navigator.userAgent.toLowerCase(), + boolCommandControlKeyIsPressed = false; + + // Check to see if either the Command key (macs) or Control key (windows) is being pressed + if (ua.indexOf("mac") > -1) { + if (event.metaKey === true) { + boolCommandControlKeyIsPressed = true; + } + } else { + if (this._isControlPressed === true) { + boolCommandControlKeyIsPressed = true; + } + } + // Did the mousedown event originate within a layer? if (ptrParent === false) { // No it did not. Do nothing. @@ -1406,8 +1419,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } else { // Something is already selected. What do do depends on whether // or not other keys are pressed. - if (this._isControlPressed === true) { - // Control key is being pressed, so we need to + if (boolCommandControlKeyIsPressed === true) { + // Control or Command 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) { @@ -1467,9 +1480,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Control key has been pressed this._isControlPressed = true; } + /* if (event.metaKey === true) { this._isControlPressed = true; } + */ } }, -- cgit v1.2.3 From f065c2bc664e9c8e4e97f8b6f6b684c310233f89 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 29 Jun 2012 14:21:08 -0700 Subject: Timeline: Bug fix: Unable to reselect a layer with control-click that was previously just deselected with control-click. (Yes, that's a weird one.) --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 4c349247..7deaf0d1 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1368,7 +1368,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrLayersLength = arrLayers.length, targetIndex = 0, isAlreadySelected = false, - indexAlreadySelected = 0, + indexAlreadySelected = -5, indexLastClicked = 0, ua = navigator.userAgent.toLowerCase(), boolCommandControlKeyIsPressed = false; @@ -1383,6 +1383,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { boolCommandControlKeyIsPressed = true; } } + // Did the mousedown event originate within a layer? if (ptrParent === false) { @@ -1400,17 +1401,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Did we just click on a layer that's already selected? if (this.currentLayersSelected !== false) { - indexAlreadySelected = this.currentLayersSelected.indexOf(targetIndex); + for (i = 0; i < this.currentLayersSelected.length; i++) { + if (this.currentLayersSelected[i] === targetIndex) { + indexAlreadySelected = i; + } + } } if (indexAlreadySelected > -1) { isAlreadySelected = true; } - - /* - if (targetIndex > -1) { - indexLastClicked = targetIndex; - } - */ // Now, do the selection based on all of that information. if (this.currentLayersSelected.length === 0) { @@ -1425,7 +1424,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // or remove it if it's already there. if (this.currentLayersSelected === false) { this.currentLayersSelected = []; - //this.currentLayerSelected = false; } if (isAlreadySelected === false) { this.currentLayersSelected.push(targetIndex); @@ -1457,9 +1455,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayersSelected = [targetIndex]; this.lastLayerClicked = targetIndex; } - } - //this._captureSelection = true; this.selectLayers(this.currentLayersSelected); this.updateStageSelection(); } -- cgit v1.2.3 From 2fa7782ef03fcbcd4cd176ca4850b764478da342 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 2 Jul 2012 08:45:08 -0700 Subject: select keyframe when first created Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 89f18f98..fe9b70d3 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -170,6 +170,12 @@ var Tween = exports.Tween = Montage.create(Component, { }, + prepareForDraw:{ + value:function(){ + this.keyframe.selectKeyframe(); + } + }, + draw:{ value:function () { this.tweenspan.element.style.width = this.spanWidth + "px"; -- cgit v1.2.3 From 2bba5361f817e96b4f84bdf5e472358da3dcec77 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 2 Jul 2012 09:13:21 -0700 Subject: Fix 3d rotate tweens not showing up Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index fe9b70d3..ae8acc57 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -250,7 +250,7 @@ var Tween = exports.Tween = Montage.create(Component, { this.isTweenAnimated = true; } - if (eventDetail.source === "translateTool") { + if (eventDetail.source === "translateTool" || eventDetail.source === "rotateTool") { var arrMat = eventDetail.data.value[0].properties.mat, strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")"; -- cgit v1.2.3 From 0ea5607c3760852b1fe63ad568b4db064129955b Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 2 Jul 2012 13:45:28 -0700 Subject: Fix performance bug when moving between nested levels Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 6 ++++++ js/panels/Timeline/Tween.reel/Tween.js | 20 +++++++++++++++++++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 26ce526f..8953888b 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -797,6 +797,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenID = 0; newTween.tweenData.spanPosition = 0; newTween.tweenData.easing = "none"; + newTween.tweenData.initSelect = true; newTween.tweenData.tweenedProperties = []; newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; @@ -813,6 +814,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenID = this.nextKeyframe; newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; newTween.tweenData.easing = "none"; + newTween.tweenData.initSelect = true; newTween.tweenData.tweenedProperties = []; newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; @@ -920,6 +922,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTweenToInsert.tweenData.tweenID = this.tweens.length; newTweenToInsert.tweenData.spanPosition = position - newTweenToInsert.tweenData.spanWidth; newTweenToInsert.tweenData.tweenedProperties = []; + newTweenToInsert.tweenData.easing = "none"; + newTweenToInsert.tweenData.initSelect = true; newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px"; @@ -999,6 +1003,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.keyFrameMillisec = 0; newTween.tweenData.tweenID = 0; newTween.tweenData.spanPosition = 0; + newTween.tweenData.initSelect = false; this.tweens.push(newTween); this.createMatchingPositionSizeTween(newTween); } @@ -1016,6 +1021,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.keyFramePosition = clickPosition; newTween.tweenData.keyFrameMillisec = currentMilliSec; newTween.tweenData.tweenID = this.nextKeyframe; + newTween.tweenData.initSelect = false; newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth; newTween.tweenData.easing = this.currentKeyframeRule[i].style.webkitAnimationName; if (newTween.tweenData.easing == "") { diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index ae8acc57..0d189fba 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -170,9 +170,26 @@ var Tween = exports.Tween = Montage.create(Component, { }, + _initSelect:{ + value: null + }, + initSelect:{ + serializable:true, + get:function () { + return this._initSelect; + }, + set:function (newVal) { + this._initSelect = newVal; + this.tweenData.initSelect = newVal; + } + }, + prepareForDraw:{ value:function(){ - this.keyframe.selectKeyframe(); + if(this.initSelect){ + this.keyframe.selectKeyframe(); + this.initSelect = false; + } } }, @@ -200,6 +217,7 @@ var Tween = exports.Tween = Montage.create(Component, { this.tweenedProperties = this.tweenData.tweenedProperties; this.isTweenAnimated = this.tweenData.isTweenAnimated; this.easing = this.tweenData.easing; + this.initSelect = this.tweenData.initSelect; this.needsDraw = true; } }, -- cgit v1.2.3 From 266b7a39438428077b368d60a1e3833d38fe5f13 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 2 Jul 2012 15:18:17 -0700 Subject: Timeline: Bug fix IKNINJA-1792, Cut pasting multiple selected objects throws error on console. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 143 +++++++++++++-------- 1 file changed, 88 insertions(+), 55 deletions(-) diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 7deaf0d1..ba745c82 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -239,6 +239,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + _lastInsertionIndex: { + value: false + }, + lastInsertionIndex: { + get: function() { + return this._lastInsertionIndex; + }, + set: function(newVal) { + this._lastInsertionIndex = newVal; + } + }, + _areTracksScrolling: { value: false }, @@ -1504,65 +1516,59 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, - createstageElement:{ - value:function (object) { - var stageElementName = "", - thingToPush = this.createLayerTemplate(), - myIndex = 0, - i = 0, - arrLayersLength = this.arrLayers.length; - // Make up a layer name. - this.currentLayerNumber = this.currentLayerNumber + 1; -// stageElementName = "Layer " + this.currentLayerNumber; - stageElementName=" "; - - // Possibly currentLayerNumber doesn't correctly reflect the - // number of layers. Check that. - // Commented out to fix WebGL rendering bug - /*for(k = 0; k < arrLayersLength; k++){ - if(this.arrLayers[k].layerData.layerName === stageElementName){ - this.currentLayerNumber = this.currentLayerNumber + 1; - stageElementName = "Layer " + this.currentLayerNumber; - break; - } - }*/ + + createStageElementsAt: { + value:function (isPaste, arrElements) { + + var i = 0, + j = 0, + arrElementsLength = arrElements.length, + arrNewLayers = [], + arrNewLayersLength = 0, + stageElementName = "", + targetIndex = 0; + if (this.lastInsertionIndex !== false) { + targetIndex = this.lastInsertionIndex; + this.lastInsertionIndex = false; + } + // We will no longer have multiple things selected, so wipe that info out // if it isn't already gone. this.currentLayersSelected = false; - - // thingToPush is the template we just got. Now fill it in. - thingToPush.layerData.layerName = stageElementName; - thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">"; - thingToPush.layerData.layerID = this.currentLayerNumber; - thingToPush.parentElement = this.currentDocument.model.domContainer; - thingToPush.layerData.isSelected = true; - thingToPush.layerData._isFirstDraw = true; - thingToPush.layerData.created = true; - thingToPush.layerData.stageElement = object; - thingToPush.layerData.isLock = false; - thingToPush.layerData.isHidden = false; + for (i = arrElementsLength-1; i >= 0; i--) { + var thingToPush = this.createLayerTemplate(); + + // Make up a layer name. + this.currentLayerNumber = this.currentLayerNumber + 1; + stageElementName=""; + + // thingToPush is the template we just got. Now fill it in. + thingToPush.layerData.layerName = stageElementName; + thingToPush.layerData.layerTag = "<" + arrElements[i].nodeName.toLowerCase() + ">"; + thingToPush.layerData.layerID = this.currentLayerNumber; + thingToPush.parentElement = this.currentDocument.model.domContainer; + thingToPush.layerData.isSelected = true; + thingToPush.layerData._isFirstDraw = true; + thingToPush.layerData.created = true; + thingToPush.layerData.stageElement = arrElements[i]; + thingToPush.layerData.isLock = false; + thingToPush.layerData.isHidden = false; + thingToPush.layerData.created = !isPaste; + thingToPush.created = !isPaste; + + if (this.checkable_animated.classList.contains("checked")) { + thingToPush.layerData.isVisible = false; + } + //arrNewLayers.push(thingToPush); + this.arrLayers.splice(targetIndex, 0, thingToPush); + } + //console.log(arrNewLayers); + //console.log(thingToPush); + + //this.arrLayers.splice(targetIndex, 0, arrNewLayers); - if (this.checkable_animated.classList.contains("checked")) { - thingToPush.layerData.isVisible = false; - } - - // Determine where the new array should be inserted in arrLayers. - // Ordinarily we could use this.getInsertionIndex BUT the new element - // insertion and selection has already fired, so getInsertionIndex will return - // incorrect info. So we need to look at the DOM. - var childrenLength = this.application.ninja.currentDocument.model.domContainer.children.length, - newIndex = childrenLength -1; - for (i = 0; i < childrenLength; i++) { - var currTest = this.application.ninja.currentDocument.model.domContainer.children[i]; - if (object == currTest) { - myIndex = newIndex - i; - } - } - - this.arrLayers.splice(myIndex, 0, thingToPush); - this.selectLayers([myIndex]); } }, @@ -1647,8 +1653,32 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleElementAdded:{ - value:function() { - this.createstageElement(this.application.ninja.selectedElements[0]); + value:function(event) { + var i = 0, + targetIndex = 0; + // One or more elements have been added to the stage. + // We need to add them to the timeline. + // But where? + // If there are no layers, we can just leave targetIndex at 0. + if (this.arrLayers.length !== 0) { + // If nothing is selected, we can leave + var firstInsertedElement; + if (typeof(event.detail.length) === "undefined") { + firstInsertedElement = event.detail; + } else { + firstInsertedElement = event.detail[0]; + } + + + } + + if (typeof(event.detail.length) === "undefined") { + // This is a standard element creation event. + this.createStageElementsAt(false, [event.detail]); + } else { + // This is a paste action, because event.detail has more than one item in it. + this.createStageElementsAt(true, event.detail); + } } }, @@ -1750,9 +1780,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrLayersLength = this.arrLayers.length, returnVal = arrLayersLength -1; if (returnVal === -1) { + this.lastInsertionIndex = 0; return false; } if (this.currentLayersSelected === false) { + this.lastInsertionIndex = 0; return false; } @@ -1761,6 +1793,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { returnVal = i; } } + this.lastInsertionIndex = returnVal; return returnVal; } }, -- cgit v1.2.3 From a7570091c3b02ae22d2a1c1410747022a1dffd46 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 2 Jul 2012 17:00:20 -0700 Subject: Timeline: Bug fix IKNINJA-1792, Cut pasting multiple selected objects throws error on console. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 129 ++++++++++++--------- 1 file changed, 74 insertions(+), 55 deletions(-) diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 7deaf0d1..1df37636 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -239,6 +239,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + _lastInsertionIndex: { + value: false + }, + lastInsertionIndex: { + get: function() { + return this._lastInsertionIndex; + }, + set: function(newVal) { + this._lastInsertionIndex = newVal; + } + }, + _areTracksScrolling: { value: false }, @@ -1504,65 +1516,59 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, - createstageElement:{ - value:function (object) { - var stageElementName = "", - thingToPush = this.createLayerTemplate(), - myIndex = 0, - i = 0, - arrLayersLength = this.arrLayers.length; - // Make up a layer name. - this.currentLayerNumber = this.currentLayerNumber + 1; -// stageElementName = "Layer " + this.currentLayerNumber; - stageElementName=" "; - - // Possibly currentLayerNumber doesn't correctly reflect the - // number of layers. Check that. - // Commented out to fix WebGL rendering bug - /*for(k = 0; k < arrLayersLength; k++){ - if(this.arrLayers[k].layerData.layerName === stageElementName){ - this.currentLayerNumber = this.currentLayerNumber + 1; - stageElementName = "Layer " + this.currentLayerNumber; - break; - } - }*/ + + createStageElementsAt: { + value:function (isPaste, arrElements) { + + var i = 0, + j = 0, + arrElementsLength = arrElements.length, + arrNewLayers = [], + arrNewLayersLength = 0, + stageElementName = "", + targetIndex = 0; + if (this.lastInsertionIndex !== false) { + targetIndex = this.lastInsertionIndex; + this.lastInsertionIndex = false; + } + // We will no longer have multiple things selected, so wipe that info out // if it isn't already gone. this.currentLayersSelected = false; - - // thingToPush is the template we just got. Now fill it in. - thingToPush.layerData.layerName = stageElementName; - thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">"; - thingToPush.layerData.layerID = this.currentLayerNumber; - thingToPush.parentElement = this.currentDocument.model.domContainer; - thingToPush.layerData.isSelected = true; - thingToPush.layerData._isFirstDraw = true; - thingToPush.layerData.created = true; - thingToPush.layerData.stageElement = object; - thingToPush.layerData.isLock = false; - thingToPush.layerData.isHidden = false; + for (i = arrElementsLength-1; i >= 0; i--) { + var thingToPush = this.createLayerTemplate(); + + // Make up a layer name. + this.currentLayerNumber = this.currentLayerNumber + 1; + stageElementName=""; + + // thingToPush is the template we just got. Now fill it in. + thingToPush.layerData.layerName = stageElementName; + thingToPush.layerData.layerTag = "<" + arrElements[i].nodeName.toLowerCase() + ">"; + thingToPush.layerData.layerID = this.currentLayerNumber; + thingToPush.parentElement = this.currentDocument.model.domContainer; + thingToPush.layerData.isSelected = true; + thingToPush.layerData._isFirstDraw = true; + thingToPush.layerData.created = true; + thingToPush.layerData.stageElement = arrElements[i]; + thingToPush.layerData.isLock = false; + thingToPush.layerData.isHidden = false; + thingToPush.layerData.created = !isPaste; + thingToPush.created = !isPaste; + + if (this.checkable_animated.classList.contains("checked")) { + thingToPush.layerData.isVisible = false; + } + //arrNewLayers.push(thingToPush); + this.arrLayers.splice(targetIndex, 0, thingToPush); + } + //console.log(arrNewLayers); + //console.log(thingToPush); + + //this.arrLayers.splice(targetIndex, 0, arrNewLayers); - if (this.checkable_animated.classList.contains("checked")) { - thingToPush.layerData.isVisible = false; - } - - // Determine where the new array should be inserted in arrLayers. - // Ordinarily we could use this.getInsertionIndex BUT the new element - // insertion and selection has already fired, so getInsertionIndex will return - // incorrect info. So we need to look at the DOM. - var childrenLength = this.application.ninja.currentDocument.model.domContainer.children.length, - newIndex = childrenLength -1; - for (i = 0; i < childrenLength; i++) { - var currTest = this.application.ninja.currentDocument.model.domContainer.children[i]; - if (object == currTest) { - myIndex = newIndex - i; - } - } - - this.arrLayers.splice(myIndex, 0, thingToPush); - this.selectLayers([myIndex]); } }, @@ -1647,8 +1653,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleElementAdded:{ - value:function() { - this.createstageElement(this.application.ninja.selectedElements[0]); + value:function(event) { + var i = 0, + targetIndex = 0; + // One or more elements have been added to the stage. + // We need to add them to the timeline. + if (typeof(event.detail.length) === "undefined") { + // This is a standard element creation event. + this.createStageElementsAt(false, [event.detail]); + } else { + // This is a paste action, because event.detail has more than one item in it. + this.createStageElementsAt(true, event.detail); + } } }, @@ -1750,9 +1766,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrLayersLength = this.arrLayers.length, returnVal = arrLayersLength -1; if (returnVal === -1) { + this.lastInsertionIndex = 0; return false; } if (this.currentLayersSelected === false) { + this.lastInsertionIndex = 0; return false; } @@ -1761,6 +1779,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { returnVal = i; } } + this.lastInsertionIndex = returnVal; return returnVal; } }, -- cgit v1.2.3 From 0d7918cb127f06adab5515edde72dccc137473f5 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 3 Jul 2012 10:01:57 -0700 Subject: Fix re-open 3D tweens correctly Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 8953888b..b1e8af8a 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -981,14 +981,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { for(j=0; j --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 588 ++++++++------------- 1 file changed, 229 insertions(+), 359 deletions(-) diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index b1e8af8a..9f2b2eb0 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -11,10 +11,10 @@ var defaultEventManager = require("montage/core/event/event-manager").defaultEve var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { + // ==== Begin Models _trackID:{ value:null }, - trackID:{ serializable:true, get:function () { @@ -31,7 +31,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _tween:{ value:[] }, - tween:{ serializable:true, get:function () { @@ -53,7 +52,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _isVisible:{ value: true }, - isVisible:{ get:function(){ return this._isVisible; @@ -72,6 +70,21 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackData.isVisible = value; } }, + + _bindingPoint : { + value : {} + }, + bindingPoint: { + get: function() { + return this._bindingPoint; + }, + set: function(newVal) { + if (newVal !== this._bindingPoint) { + this._bindingPoint = newVal; + this.setData(); + } + } + }, _stageElement: { value: null @@ -86,7 +99,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - // Are the various collapsers collapsed or not _isMainCollapsed:{ value: true }, @@ -99,18 +111,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackData.isMainCollapsed = newVal; } }, - _isTransformCollapsed:{ - value:true - }, - isTransformCollapsed:{ - get:function () { - return this._isTransformCollapsed; - }, - set:function (newVal) { - this._isTransformCollapsed = newVal; - this.trackData.isTransformCollapsed = newVal; - } - }, + _isPositionCollapsed:{ value:true }, @@ -123,6 +124,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackData.isPositionCollapsed = newVal; } }, + _isStyleCollapsed:{ value:true }, @@ -135,6 +137,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackData.isStyleCollapsed = newVal; } }, + _bypassAnimation : { value: false }, @@ -164,6 +167,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackData.arrStyleTracks = newVal; } }, + _styleTracksRepetition: { value: null }, @@ -176,8 +180,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._styleTracksRepetition = newVal; } }, - - /* Position Property Tracks */ + _arrPositionTracks : { value: [] }, @@ -192,6 +195,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + _positionTracksRepetition: { value: null }, @@ -204,26 +208,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - - /* Transform Property Tracks */ - _arrTransformTracks : { - value: [] - }, - arrTransformTracks: { - serializable:true, - get: function() { - return this._arrTransformTracks; - }, - set: function(newVal) { - this._arrTransformTracks = newVal; - this.trackData.arrTransformTracks = newVal; - } - }, - _tweens:{ value:[] }, - tweens:{ serializable: true, get:function () { @@ -238,7 +225,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _tweenRepetition:{ value:null }, - tweenRepetition:{ get:function () { return this._tweenRepetition; @@ -251,7 +237,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _trackDuration:{ value:0 }, - trackDuration:{ serializable:true, get:function () { @@ -269,7 +254,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _trackPosition:{ value:0 }, - trackPosition:{ serializable:true, get:function () { @@ -284,7 +268,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _currentKeyframeRule:{ value:null }, - currentKeyframeRule:{ serializable: true, get:function(){ @@ -307,7 +290,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _isTrackAnimated:{ value:null }, - isTrackAnimated:{ serializable: true, get:function(){ @@ -319,7 +301,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - // should be unneeded with one element per layer restriction _animatedElement:{ value:null }, @@ -337,7 +318,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _animationName:{ value:null }, - animationName:{ serializable:true, get:function () { @@ -352,7 +332,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _ruleList:{ value:[] }, - ruleList:{ get:function () { return this._ruleList; @@ -382,6 +361,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._positionCollapser = val; } }, + _mainCollapser:{ value:null }, @@ -394,18 +374,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._mainCollapser = val; } }, - _transformCollapser:{ - value:null - }, - transformCollapser:{ - serializable:true, - get:function () { - return this._transformCollapser; - }, - set:function (val) { - this._transformCollapser = val; - } - }, + _styleCollapser:{ value:null }, @@ -419,10 +388,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - // Drag and Drop properties _dragAndDropHelper : { value: false }, + _dragAndDropHelperCoords: { value: false }, @@ -434,6 +403,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._dragAndDropHelperCoords = newVal; } }, + _draggingIndex: { value: false }, @@ -445,12 +415,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._draggingIndex = newVal; } }, + _dragAndDropHelperOffset : { value: false }, + _appendHelper: { value: false }, + _deleteHelper: { value: false }, @@ -458,7 +431,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _trackData:{ value: false }, - trackData:{ serializable: true, get:function(){ @@ -502,52 +474,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.needsDraw = true; } }, + // ==== End Models - createTrackData: { - value: function() { - tempData = {}; - tempData.bypassAnimation = this.bypassAnimation; - tempData.trackID = this.layerID; - tempData.tweens = this.tweens; - tempData.animatedElement = this.animatedElement; - tempData.arrStyleTracks = this.arrStyleTracks; - tempData.arrPositionTracks = this.arrPositionTracks; - tempData.isTrackAnimated = this.isTrackAnimated; - tempData.trackDuration = this.trackDuration; - tempData.animationName = this.animationName; - tempData.currentKeyframeRule = this.currentKeyframeRule; - tempData.isMainCollapsed = this.isMainCollapsed; - tempData.isPositionCollapsed = this.isPositionCollapsed; - tempData.isTransformCollapsed = this.isTransformCollapsed; - tempData.isStyleCollapsed = this.isStyleCollapsed; - tempData.trackPosition = this.trackPosition; - tempData.isVisible = this.isVisible; - this.trackData = tempData; - } - }, - - // Data binding observation point and trigger method - _bindingPoint : { - value : {} - }, - bindingPoint: { - get: function() { - return this._bindingPoint; - }, - set: function(newVal) { - if (newVal !== this._bindingPoint) { - this._bindingPoint = newVal; - this.setData(); - } - } - }, - - triggerOutgoingBinding : { - value: function() { - this.trackData.triggerBinding = !this.trackData.triggerBinding; - } - }, - + // ==== Begin Draw cycle methods prepareForDraw:{ value:function () { this.init(); @@ -555,11 +484,9 @@ 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); + // Drag and Drop event handlers 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); } }, @@ -574,12 +501,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } // 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") { @@ -588,18 +513,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } 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; @@ -625,7 +546,6 @@ 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); @@ -636,11 +556,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { 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); @@ -651,7 +566,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + // ==== End Draw cycle methods + // ==== Begin Event handlers handleTlZoomSlider: { value: function(event) { @@ -663,7 +580,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (i === 0) { // Exception: 0th item does not depend on anything - // TODO: If 0th tween is draggable, this will need to be fixed. + // If 0th tween is draggable, this will need to be fixed. this.tweens[i].tweenData.spanWidth=0; this.tweens[i].tweenData.spanPosition=0; this.tweens[i].tweenData.keyFramePosition=0; @@ -693,10 +610,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { handleClick:{ value:function (ev) { - // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span - // This needs to move to a keyboard shortcut that is TBD - var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - var targetElementOffset = this.findXOffset(ev.currentTarget), position = (event.pageX - targetElementOffset) - 18; @@ -704,7 +617,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * position; this.application.ninja.timeline.updateTimeText(currentMillisec); - if (ev.shiftKey) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.selectLayer(selectedIndex, true); @@ -726,8 +638,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, handleKeyboardShortcut:{ - value:function(ev){ - if(ev.actionType == "insert"){ + value:function (ev) { + if (ev.actionType == "insert") { if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); @@ -736,23 +648,79 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.handleNewTween(ev); this.updateKeyframeRule(); } - } else if(ev.actionType == "remove"){ + } else if (ev.actionType == "remove") { this.removeTween(); this.updateKeyframeRule(); } } }, + // Drag and drop event handlers + handleKeyframeDragstart:{ + value:function (event) { + 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=" + 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 = "5px"; + this._dragAndDropHelper.style.left = "0px"; + this._dragAndDropHelper.style.zIndex = 700; + this._dragAndDropHelper.classList.add("keyframeSelected"); + this._dragAndDropHelper.classList.add("track-dnd-helper"); + + 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; + + var i = 0, + arrLayersLength = this.parentComponent.parentComponent.arrLayers.length, + myId = null; + for (i = 0; i < arrLayersLength; i++) { + var currUuid = this.parentComponent.parentComponent.trackRepetition.childComponents[i].uuid; + if (currUuid === this.uuid) { + myId = i; + } + } + this.parentComponent.parentComponent.draggingTrackId = myId; + this.parentComponent.parentComponent.draggingType = "keyframe"; + } + }, + + handleKeyframeDragend:{ + value:function (event) { + if (this.parentComponent.parentComponent.draggingType !== "keyframe") { + return; + } + this._deleteHelper = true; + this.needsDraw = true; + + } + }, + handleNewTween:{ value:function (ev) { - if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.selectLayer(selectedIndex, false); this.insertTween(ev.offsetX); } else { - // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. - // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. if (typeof(ev.currentTarget) === "undefine