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(-) (limited to 'js') 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 d39d712422a85e8671b84ae71d5249d917915f42 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 3 Jul 2012 10:59:57 -0700 Subject: Cleanup TimelineTrack.js Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 588 ++++++++------------- 1 file changed, 229 insertions(+), 359 deletions(-) (limited to 'js') 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) === "undefined") { this.splitTweenAt(ev.offsetX); } else { @@ -764,20 +732,113 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - findXOffset:{ - value:function (obj) { - // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element - var curleft = 0; - if (typeof(obj) === "undefined") { - //debugger; + handleLayerEvent:{ + value:function (layerEvent) { + if (layerEvent.layerID !== this.trackID) { + return; } - if (obj.offsetParent) { - do { - curleft += (obj.offsetLeft - obj.scrollLeft); + if (layerEvent.layerEventType === "newStyle") { + var newStyleTrack = {}; + newStyleTrack.propTrackData = {}; + newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; + newStyleTrack.propTrackData.propTweens = []; + newStyleTrack.propTrackData.trackType = "style"; + newStyleTrack.propTrackData.trackEditorProperty = ""; + newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; + newStyleTrack.propTrackData.existingRule = ""; + this.arrStyleTracks.push(newStyleTrack); + } else if (layerEvent.layerEventType === "restoreStyle") { + var restoredStyleTrack = {}; + restoredStyleTrack.propTrackData = {}; + restoredStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; + restoredStyleTrack.propTrackData.propTweens = []; + restoredStyleTrack.propTrackData.trackType = "style"; + restoredStyleTrack.propTrackData.trackEditorProperty = layerEvent.trackEditorProperty; + restoredStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; + restoredStyleTrack.propTrackData.existingRule = layerEvent.existingRule; + this.arrStyleTracks.push(restoredStyleTrack); + } + else if (layerEvent.layerEventType === "deleteStyle") { + this.arrStyleTracks.splice(layerEvent._event.selectedStyleIndex, 1); + } + } + }, + // ==== End Event handlers - } while (obj = obj.offsetParent); + // ==== Begin Controllers + init:{ + value:function () { + this.createPositionTracks(); + this.element.addEventListener("layerEvent", this, false); + } + }, + + createPositionTracks:{ + value:function(){ + if (this.arrPositionTracks.length > 0) { + return; } - return curleft; + + var newLeftTrack = {}; + newLeftTrack.propTrackData = {}; + newLeftTrack.propTrackData.propTweens = []; + newLeftTrack.propTrackData.styleIndex = 1; + newLeftTrack.propTrackData.trackType = "position"; + newLeftTrack.propTrackData.trackEditorProperty = "left"; + this.arrPositionTracks.push(newLeftTrack); + + var newTopTrack = {}; + newTopTrack.propTrackData = {}; + newTopTrack.propTrackData.propTweens = []; + newTopTrack.propTrackData.styleIndex = 0; + newTopTrack.propTrackData.trackType = "position"; + newTopTrack.propTrackData.trackEditorProperty = "top"; + this.arrPositionTracks.push(newTopTrack); + + var newWidthTrack = {}; + newWidthTrack.propTrackData = {}; + newWidthTrack.propTrackData.propTweens = []; + newWidthTrack.propTrackData.styleIndex = 2; + newWidthTrack.propTrackData.trackType = "position"; + newWidthTrack.propTrackData.trackEditorProperty = "width"; + this.arrPositionTracks.push(newWidthTrack); + + var newHeightTrack = {}; + newHeightTrack.propTrackData = {}; + newHeightTrack.propTrackData.propTweens = []; + newHeightTrack.propTrackData.styleIndex = 3; + newHeightTrack.propTrackData.trackType = "position"; + newHeightTrack.propTrackData.trackEditorProperty = "height"; + this.arrPositionTracks.push(newHeightTrack); + } + }, + + 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; + } + }, + + triggerOutgoingBinding:{ + value:function () { + this.trackData.triggerBinding = !this.trackData.triggerBinding; } }, @@ -822,7 +883,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; this.tweens.push(newTween); - // update the animation duration var animationDuration = (this.trackDuration / 1000) + "s"; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.nextKeyframe += 1; @@ -845,23 +905,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.tweens.pop(); return; } - - // Update the next tween to have new span position and width. this.tweens[tweenIDToRemove + 1].tweenData.spanPosition = oldPosition; this.tweens[tweenIDToRemove + 1].spanPosition = oldPosition; this.tweens[tweenIDToRemove + 1].tweenData.spanWidth = this.tweens[tweenIDToRemove + 1].tweenData.spanWidth + oldSpanWidth; this.tweens[tweenIDToRemove + 1].spanWidth = this.tweens[tweenIDToRemove + 1].spanWidth + oldSpanWidth; - // redraw the tweens for(var i in this.tweenRepetition.childComponents){ this.tweenRepetition.childComponents[i].setData(); } - // remove the selected tween this.tweens.splice(tweenIDToRemove, 1); this.application.ninja.currentDocument.model.needsSave = true; - // update the tween ids for (var j = 0; j < this.tweens.length; j++) { this.tweens[j].tweenID = j; this.tweens[j].tweenData.tweenID = j; @@ -869,16 +924,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - createMatchingPositionSizeTween:{ - value:function (newTween) { - var i; - var posTracks = this.positionTracksRepetition.childComponents.length; - for (i = 0; i < posTracks; i++) { - this.positionTracksRepetition.childComponents[i].propTweens.push(newTween); - } - } - }, - // splitTweenAt: Split a tween at a particular position (x coordinate) splitTweenAt: { value:function (position) { @@ -929,16 +974,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px"; newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; this.tweens.splice(splitTweenIndex, 0, newTweenToInsert); - - // We are done, so end the loop. + i = tweensLength; } } - - // We've made a change, so set the needsSave flag this.application.ninja.currentDocument.model.needsSave = true; - - // Our tween IDs are now all messed up. Fix them. + for (i = 0; i <= tweensLength+1; i++) { this.tweens[i].tweenID = i; this.tweens[i].tweenData.tweenID = i; @@ -955,8 +996,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created=true; this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement; if(this.animatedElement!==undefined){ + this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); - // build tweens for this tracks's keyframe rule + if(this.animationName){ // check for multiple animation names var animationNameList = this.animationName.split(","); @@ -979,16 +1021,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var j, styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; - for(j=0; j 0) { - return; + createMatchingPositionSizeTween:{ + value:function (newTween) { + var i; + var posTracks = this.positionTracksRepetition.childComponents.length; + for (i = 0; i < posTracks; i++) { + this.positionTracksRepetition.childComponents[i].propTweens.push(newTween); } - - // create 'left' track - var newLeftTrack = {}; - newLeftTrack.propTrackData = {}; - newLeftTrack.propTrackData.propTweens = []; - newLeftTrack.propTrackData.styleIndex = 1; - newLeftTrack.propTrackData.trackType = "position"; - newLeftTrack.propTrackData.trackEditorProperty = "left"; - this.arrPositionTracks.push(newLeftTrack); - - // create 'top' track - var newTopTrack = {}; - newTopTrack.propTrackData = {}; - newTopTrack.propTrackData.propTweens = []; - newTopTrack.propTrackData.styleIndex = 0; - newTopTrack.propTrackData.trackType = "position"; - newTopTrack.propTrackData.trackEditorProperty = "top"; - this.arrPositionTracks.push(newTopTrack); - - // create 'width' track - var newWidthTrack = {}; - newWidthTrack.propTrackData = {}; - newWidthTrack.propTrackData.propTweens = []; - newWidthTrack.propTrackData.styleIndex = 2; - newWidthTrack.propTrackData.trackType = "position"; - newWidthTrack.propTrackData.trackEditorProperty = "width"; - this.arrPositionTracks.push(newWidthTrack); - - // create 'height' track - var newHeightTrack = {}; - newHeightTrack.propTrackData = {}; - newHeightTrack.propTrackData.propTweens = []; - newHeightTrack.propTrackData.styleIndex = 3; - newHeightTrack.propTrackData.trackType = "position"; - newHeightTrack.propTrackData.trackEditorProperty = "height"; - this.arrPositionTracks.push(newHeightTrack); } }, - handleLayerEvent:{ - value:function (layerEvent) { - if (layerEvent.layerID !== this.trackID) { - return; - } - if (layerEvent.layerEventType === "newStyle") { - var newStyleTrack = {}; - newStyleTrack.propTrackData = {}; - newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; - newStyleTrack.propTrackData.propTweens = []; - newStyleTrack.propTrackData.trackType = "style"; - newStyleTrack.propTrackData.trackEditorProperty = ""; - newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; - newStyleTrack.propTrackData.existingRule = ""; - - this.arrStyleTracks.push(newStyleTrack); - - } else if (layerEvent.layerEventType === "restoreStyle") { - var restoredStyleTrack = {}; - restoredStyleTrack.propTrackData = {}; - restoredStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; - restoredStyleTrack.propTrackData.propTweens = []; - restoredStyleTrack.propTrackData.trackType = "style"; - restoredStyleTrack.propTrackData.trackEditorProperty = layerEvent.trackEditorProperty; - restoredStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; - restoredStyleTrack.propTrackData.existingRule = layerEvent.existingRule; + findXOffset:{ + value:function (obj) { + var curleft = 0; + if (typeof(obj) === "undefined") { - this.arrStyleTracks.push(restoredStyleTrack); } - else if (layerEvent.layerEventType === "deleteStyle") { - // We are deleting a style, so delete the associated track - this.arrStyleTracks.splice(layerEvent._event.selectedStyleIndex, 1); + if (obj.offsetParent) { + do { + curleft += (obj.offsetLeft - obj.scrollLeft); + + } while (obj = obj.offsetParent); } + return curleft; } }, + getTweenIndexById: { value: function(intID) { var i = 0, @@ -1222,98 +1184,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } return returnVal; } - }, - - // 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.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width"); - 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; - - // Get my index in the track array - 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; - - } - }, - - - /* Begin: Logging routines */ - _boolDebug: { - enumerable: false, - value: false // set to true to enable debugging to console; false for turning off all debugging. - }, - boolDebug: { - get: function() { - return this._boolDebug; - }, - set: function(boolDebugSwitch) { - this._boolDebug = boolDebugSwitch; - } - }, - log: { - value: function(strMessage) { - if (this.boolDebug) { - console.log(this.getLineNumber() + ": " + strMessage); - } - } - }, - getLineNumber: { - value: function() { - try { - throw new Error('bazinga') - }catch(e){ - return e.stack.split("at")[3].split(":")[2]; - } - } } - /* End: Logging routines */ + // ==== End Controllers }); -- cgit v1.2.3 From 040a99e4c20e53a4ed3841357ef5f28d78f3f8a2 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Jul 2012 11:04:32 -0700 Subject: Timeline: Code refactor for Layer.js --- js/panels/Timeline/Layer.reel/Layer.js | 2709 ++++++++++++++++---------------- 1 file changed, 1338 insertions(+), 1371 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 4dd9e88a..f7b66a39 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -1,1372 +1,1339 @@ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; -var Collapser = require("js/panels/Timeline/Collapser").Collapser; -var Hintable = require("js/components/hintable.reel").Hintable; -var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle; -var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; -var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; -var nj = require("js/lib/NJUtils").NJUtils; -var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; - -var Layer = exports.Layer = Montage.create(Component, { - - dynamicLayerTag: { - value: null, - serializable: true - }, - - positionCollapser: { - value: null, - serializable: true - }, - - transformCollapser: { - value: null, - serializable: true - }, - - styleCollapser: { - value: null, - serializable: true - }, - - clickerMain: { - value: null, - serializable: true - }, - - myLabel: { - value: null, - serializable: true - }, - - /* Begin: Models */ - - /* Main collapser model: the main collapser for the layer */ - _mainCollapser : { - value: false - }, - mainCollapser: { - get: function() { - return this._mainCollapser; - }, - set: function(newVal) { - this._mainCollapser = newVal; - }, - serializable: true - }, - - /* Style models: the array of styles, and the repetition that uses them */ - _arrLayerStyles : { - value: [] - }, - arrLayerStyles : { - serializable: true, - get: function() { - return this._arrLayerStyles; - }, - set: function(newVal) { - this._arrLayerStyles = newVal; - } - }, - _styleRepetition : { - value: false - }, - styleRepetition : { - serializable: true, - get: function() { - return this._styleRepetition; - }, - set: function(newVal) { - this._styleRepetition = newVal; - } - }, - _styleCounter : { - value: 0 - }, - styleCounter:{ - serializable:true, - get:function () { - return this._styleCounter; - }, - set:function (newVal) { - this._styleCounter = newVal; - } - }, - _selectedStyleIndex: { - value: false - }, - selectedStyleIndex: { - get: function() { - return this._selectedStyleIndex; - }, - set: function(newVal) { - if (typeof(newVal) === "undefined") { - return; - } - if (newVal !== this._selectedStyleIndex) { - this._selectedStyleIndex = newVal; - this.layerData.selectedStyleIndex = newVal; - } - } - }, - _storedStyleIndex : { - value: false - }, - - /* Layer models: the name, ID, and selected and animation booleans for the layer */ - _layerName:{ - value: "" - }, - - layerName:{ - serializable: true, - get:function(){ - return this._layerName; - }, - set:function(newVal){ - if (this._layerEditable.value !== newVal) { - this._layerEditable.value = newVal; - } - if (this._layerName !== newVal) { - this._layerName = newVal; - } - if (this.layerData.layerName !== newVal) { - this.layerData.layerName = newVal; - } - - if (typeof(this.dynamicLayerName) !== "undefined") { - if (this.dynamicLayerName.value !== newVal) { - this.dynamicLayerName.value = newVal; - } - } - this.needsDraw = true; - } - }, - _layerID:{ - value: "Default Layer ID" - }, - - layerID:{ - serializable: true, - get:function(){ - return this._layerID; - }, - set:function(value){ - this._layerID = value; - this.layerData.layerID = value; - } - }, - _layerTag:{ - value: "tag" - }, - - layerTag:{ - serializable: true, - get:function(){ - return this._layerTag; - }, - set:function(newVal){ - this._layerTag = newVal; - this.layerData.layerTag = newVal; - } - }, - _docUUID : { - value: null - }, - docUUID : { - serializable: true, - get: function() { - return this._docUUID; - }, - set: function(newVal) { - this._docUUID = newVal; - } - }, - - _stageElement: { - value: null - }, - - stageElement: { - get: function() { - return this._stageElement; - }, - set: function(newVal) { - this._stageElement = newVal; - this.layerData.stageElement = newVal; - } - }, - - - _elementsList : { - value: [] - }, - elementsList : { - serializable: true, - get: function() { - return this._elementsList; - }, - set: function(newVal) { - this._elementsList = newVal; - } - }, - - /* Position and Size hottext values */ - _dtextPositionX : { - value:null - }, - - dtextPositionX:{ - serializable: true, - get:function(){ - return this._dtextPositionX; - }, - set:function(value){ - if (this._dtextPositionX !== value) { - this._dtextPositionX = value; - this.layerData.dtextPositionX = value; - } - } - }, - - _dtextPositionY : { - value:null - }, - - dtextPositionY:{ - serializable: true, - get:function(){ - return this._dtextPositionY; - }, - set:function(value){ - if (this._dtextPositionY !== value) { - this._dtextPositionY = value; - this.layerData.dtextPositionY = value; - } - - } - }, - - _dtextScaleX : { - value:null - }, - - dtextScaleX:{ - serializable: true, - get:function(){ - return this._dtextScaleX; - }, - set:function(value){ - if (this._dtextScaleX !== value) { - this._dtextScaleX = value; - this.layerData.dtextScaleX = value; - } - - } - }, - - _dtextScaleY : { - value:null - }, - - dtextScaleY:{ - serializable: true, - get:function(){ - return this._dtextScaleY; - }, - set:function(value){ - if (this._dtextScaleY !== value) { - this._dtextScaleY = value; - this.layerData.dtextScaleY = value; - } - - } - }, - - /* isSelected: whether or not the layer is currently selected. */ - _isSelected:{ - value: false - }, - - isSelected:{ - get:function(){ - return this._isSelected; - }, - set:function(value){ - if (value !== this._isSelected) { - // Only concerned about different values - if (value === false) { - // If changing from true to false, we need to deselect any associated styles - this.selectStyle(false); - } else { - if (this._storedStyleIndex !== false) { - this.selectStyle(this._storedStyleIndex); - } - } - this._isSelected = value; - this.layerData.isSelected = value; - this.needsDraw = true; - } - - } - }, - - /* isActive: Whether or not the user is actively clicking within the layer; used to communicate state with - * TimelinePanel. - */ - _isActive: { - value: false - }, - isActive: { - serializable:true, - get: function() { - return this._isActive; - }, - set: function(newVal) { - this._isActive = newVal; - this.layerData.isActive = newVal; - } - }, - - - _isAnimated:{ - value: false - }, - - isAnimated:{ - get:function(){ - return this._isAnimated; - }, - set:function(value){ - this._isAnimated = value; - this.layerData.isAnimated = value; - } - }, - _isVisible:{ - value: true - }, - - isVisible:{ - get:function(){ - return this._isVisible; - }, - set:function(value){ - if (this._isVisible !== value) { - this._isVisible = value; - if (value === true) { - this.element.classList.remove("layer-hidden"); - } else { - this.element.classList.add("layer-hidden"); - } - } - this.layerData.isVisible = value; - } - }, - - _isLock:{ - value: false - }, - - isLock:{ - get:function(){ - return this._isLock; - }, - set:function(value){ - if (this._isLock !== value) { - this._isLock = value; - - } - this.layerData.isLock = value; - } - }, - - _isHidden:{ - value: false - }, - - isHidden:{ - get:function(){ - return this._isHidden; - }, - set:function(value){ - if (this._isHidden !== value) { - this._isHidden = value; - - } - this.layerData._isHidden = value; - } - }, - - - _justAdded: { - value: false - }, - _layerEditable : { - value: false - }, - - _dynamicLayerName:{ - value:true - }, - dynamicLayerName:{ - serializable:true, - get:function () { - return this._dynamicLayerName; - }, - set:function (newVal) { - this._dynamicLayerName = newVal; - } - }, - - // Are the various collapsers collapsed or not - _isMainCollapsed : { - value: true - }, - isMainCollapsed : { - serializable: true, - get: function() { - return this._isMainCollapsed; - }, - set: function(newVal) { - this._isMainCollapsed = newVal; - this.layerData.isMainCollapsed = newVal; - - } - }, - - _isPositionCollapsed : { - value: true - }, - isPositionCollapsed : { - serializable: true, - get: function() { - return this._isPositionCollapsed; - }, - set: function(newVal) { - this._isPositionCollapsed = newVal; - this.layerData.isPositionCollapsed = newVal; - } - }, - - _isStyleCollapsed : { - value: true - }, - isStyleCollapsed : { - serializable: true, - get: function() { - return this._isStyleCollapsed; - }, - set: function(newVal) { - this._isStyleCollapsed = newVal; - this.layerData.isStyleCollapsed = newVal; - } - }, - _bypassAnimation : { - value: false - }, - bypassAnimation : { - serializable: true, - get: function() { - return this._bypassAnimation; - }, - set: function(newVal) { - if (typeof(this.layerData) !== "undefined") { - this._bypassAnimation = newVal; - this.layerData.bypassAnimation = newVal; - } - } - }, - - // Is this the first draw? - _isFirstDraw : { - value: true - }, - - _layerData:{ - value:{} - }, - - layerData:{ - serializable: true, - get:function(){ - return this._layerData; - }, - set:function(val){ - this._layerData = val; - if(this._layerData){ - this.setData(true); - } - } - }, - - setData:{ - value:function(boolNeedsDraw){ - if (typeof(this._layerData) === "undefined") { - return; - } - - if (typeof(this._layerData.layerName) === "undefined") { - return; - } - - if (typeof(boolNeedsDraw) === "undefined") { - boolNeedsDraw = false; - } - - this.layerName = this.layerData.layerName; - this.layerID = this.layerData.layerID; - this.stageElement = this.layerData.stageElement - this.arrLayerStyles = this.layerData.arrLayerStyles; - this.isMainCollapsed = this.layerData.isMainCollapsed; - this.isPositionCollapsed = this.layerData.isPositionCollapsed; - this.isSelected = this.layerData.isSelected; - this.isActive = this.layerData.isActive; - this.isStyleCollapsed = this.layerData.isStyleCollapsed; - this.bypassAnimation = this.layerData.bypassAnimation; - this.dtextPositionX = this.layerData.dtextPositionX; - this.dtextPositionY = this.layerData.dtextPositionY; - this.dtextSkewX = this.layerData.dtextSkewX; - this.dtextSkewY = this.layerData.dtextSkewY; - this.dtextScaleX = this.layerData.dtextScaleX; - this.dtextScaleY = this.layerData.dtextScaleY; - this.dtextRotate = this.layerData.dtextRotate; - //this._isFirstDraw = this.layerData._isFirstDraw; - this.layerTag = this.layerData.layerTag; - this.isVisible = this.layerData.isVisible; - this.isAnimated = this.layerData.isAnimated; - this.docUUID = this.layerData.docUUID; - this.selectedStyleIndex = this.layerData.selectedStyleIndex; - this.needsDraw = boolNeedsDraw; - this.isLock = this.layerData.isLock; - this.isHidden = this.layerData.isHidden; - } - }, - - /* Data binding point and outgoing binding trigger method */ - _bindingPoint : { - value : {} - }, - bindingPoint: { - get: function() { - return this._bindingPoint; - }, - set: function(newVal) { - if (newVal !== this._bindingPoint) { - this._bindingPoint = newVal; - this.setData(true); - } - } - }, - - triggerOutgoingBinding : { - value: function() { - this.layerData.triggerBinding = !this.layerData.triggerBinding; - } - }, - /* END: Models */ - - /* Begin: Draw cycle */ - prepareForDraw: { - value: function() { - - // Initialize myself - this.init(); - - // Make it editable! - this._layerEditable = Hintable.create(); - this._layerEditable.element = this.titleSelector; - this.titleSelector.identifier = "selectorEditable"; - this.titleSelector.addEventListener("click", this, false); - this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false); - this._layerEditable.addEventListener("change", this.handleLayerNameChange.bind(this), false); - this._layerEditable.editingClass = "editable2"; - this._layerEditable.value = this.layerName; - - // Collapser event handlers. - this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); - this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); - this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); - this.layerLock.addEventListener("click",this.handleLayerLock.bind(this),false); - this.visibilityButton.addEventListener("click",this.handleLayerVisibility.bind(this),false); - - // Add event listeners to add and delete style buttons - this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false); - this.buttonDeleteStyle.addEventListener("click", this.handleDeleteStyleClick.bind(this), false); - - // Add mousedown listener to set isActive - this.element.addEventListener("mousedown", this, false); - this.element.addEventListener("click", this, false); - - // Drag and drop event handlers - this.myLabel.addEventListener("mouseover", this.handleMouseover.bind(this), false); - this.myLabel.addEventListener("mouseout", this.handleMouseout.bind(this), false); - this.element.addEventListener("dragover", this.handleDragover.bind(this), false); - this.element.addEventListener("dragleav