From 6c4f58ab9dd2f60d509d3e1c1ba0c94a6995691d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 18 May 2012 15:05:50 -0700 Subject: Timeline: Fix element insertion to use new TimelinePanel properties and multiselect. Fix Property Panel so changing an ID there will actually change an ID on the element (broken by switch from id to data-montage-id change). --- js/controllers/elements/element-controller.js | 28 ++++++++ js/panels/Timeline/Layer.reel/Layer.js | 22 ------ .../Timeline/TimelinePanel.reel/TimelinePanel.js | 82 +++++++++++++++------- js/panels/properties.reel/properties.js | 5 +- 4 files changed, 87 insertions(+), 50 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index eecf319e..925fc959 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -11,6 +11,33 @@ exports.ElementController = Montage.create(Component, { addElement: { value: function(el, styles) { + // Updated to use new methods in TimelinePanel. JR. + var insertionIndex = this.application.ninja.timeline.getInsertionIndex(); + console.log("elementcontroller.addElement, insertionIndex = ", insertionIndex); + //debugger; + if (insertionIndex === false) { + this.application.ninja.currentSelectedContainer.appendChild(el); + } else { + if (insertionIndex === 0) { + this.application.ninja.currentSelectedContainer.appendChild(el); + } else { + /* + if (insertionIndex === this.application.ninja.timeline.arrLayers.length-1) { + this.application.ninja.currentSelectedContainer.appendChild(el); + } else { + */ + var element = this.application.ninja.timeline.arrLayers[insertionIndex].layerData.stageElement; + element.parentNode.insertBefore(el, element.nextSibling); + //} + } + } + + if(styles) { + this.application.ninja.stylesController.setElementStyles(el, styles); + } + + /* + // Old methods. Kept for reference. Delete if not needed. JR. if(this.application.ninja.timeline.currentLayerSelected) { var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID); @@ -27,6 +54,7 @@ exports.ElementController = Montage.create(Component, { if(styles) { this.application.ninja.stylesController.setElementStyles(el, styles); } + */ } }, diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 48b2dfdf..4fb3e43c 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -500,11 +500,6 @@ 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); - - this.eventManager.addEventListener("updatedID", this, false); - - - } }, draw: { @@ -854,23 +849,6 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, - - handleUpdatedID:{ - value:function(event){ - var i= this.application.ninja.timeline.arrLayers.length; - if(event.detail.id){ - for(var k=0;k -1) { - //console.log('TimelinePanel.selectLayers, selecting layer at index ', i) this.arrLayers[i].layerData.isSelected = true; this.arrLayers[i].isSelected = true; this.triggerLayerBinding(i); @@ -944,7 +945,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Finally, reset the master duration. this.resetMasterDuration(); - } }, @@ -1169,35 +1169,27 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (this.checkable_animated.classList.contains("checked")) { thingToPush.layerData.isVisible = false; } - - if (this.layerRepetition.selectedIndexes) { - // There is a selected layer, so we need to splice the new layer on top of it. - myIndex = this.layerRepetition.selectedIndexes[0]; - if (typeof(myIndex) === "undefined") { - // Edge case: sometimes there's nothing selected, so this will be "undefined" - // In that case, set it to 0, the first layer. - myIndex = 0; - } - for (var i = 0; i < this.layerRepetition.selectedIndexes.length; i++) { - if (myIndex > this.layerRepetition.selectedIndexes[i]) { - myIndex = this.layerRepetition.selectedIndexes[i]; - } - } - thingToPush.layerData.layerPosition = myIndex; - thingToPush.layerData.trackPosition = myIndex; - this.arrLayers.splice(myIndex, 0, thingToPush); - } else { - thingToPush.layerData.layerPosition = myIndex; - this.arrLayers.splice(myIndex, 0, thingToPush); - + + // 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.currentSelectedContainer.children.length, + newIndex = childrenLength -1; + for (i = 0; i < childrenLength; i++) { + var currTest = this.application.ninja.currentSelectedContainer.children[i]; + if (object == currTest) { + myIndex = newIndex - i; + } } + + this.arrLayers.splice(myIndex, 0, thingToPush); this.selectLayers([myIndex]); } }, restoreLayer:{ value:function (ele) { - var stageElementName, thingToPush = this.createLayerTemplate(); @@ -1406,6 +1398,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + // Get the index where a layer should be inserted based on selection. + // If nothing is selected, returns false. + // Used by ElementController.addElement. + getInsertionIndex: { + value: function() { + var i = 0, + currentLayersSelectedLength = this.currentLayersSelected.length, + arrLayersLength = this.arrLayers.length, + returnVal = arrLayersLength -1; + if (this.currentLayersSelected === false) { + return false; + } + + for (i = 0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerData.isSelected) { + returnVal = i; + } + } + return returnVal; + } + }, + getLayerIndexByID:{ value:function (layerID, tempArr) { var i = 0, @@ -1516,6 +1530,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, + + // A layer's ID has been updated in the property panel. We need to update + // our layer. + handleLayerIdUpdate: { + value: function(event) { + var i = 0, + arrLayersLength = this.arrLayers.length; + for (i = 0; i < arrLayersLength; i++) { + var myTest = this.arrLayers[i].layerData.stageElement; + if (this.application.ninja.selectedElements[0] == myTest) { + this.arrLayers[i].layerData.layerName = event.detail.id; + this.arrLayers[i].layerName = event.detail.id; + this.triggerLayerBinding(i); + } + } + } + }, + // Trigger the layer/track data binding triggerLayerBinding : { value: function(intIndex) { diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 507770f6..9af9253b 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -101,8 +101,7 @@ exports.Properties = Montage.create(Component, { */ handleBlur: { value: function(event) { - if(event.target.id === "elementId") { - + if(event.target.dataset.montageId === "elementId") { // Remove all white spaces from the id this.elementId.value = this.elementId.value.replace(/\s/g, ''); @@ -118,7 +117,7 @@ exports.Properties = Montage.create(Component, { } else { ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); } - } else if(event.target.id === "elementClass") { + } else if(event.target.dataset.montageId === "elementClass") { if(this.application.ninja.selectedElements.length) { ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, this.application.ninja.selectedElements[0].className, "pi"); } else { -- cgit v1.2.3