From 18143071c9e1308d6cb9289477563aea22856c5e Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 30 Mar 2012 12:16:40 -0700 Subject: Timeline: Bug fixes. --- js/panels/Timeline/Layer.reel/Layer.js | 2 +- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index c69f28b0..f1882985 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -385,7 +385,7 @@ var Layer = exports.Layer = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - if (newVal !== this._bypassAnimation) { + if ((newVal !== this._bypassAnimation) && (typeof(this.layerData) !== "undefined")) { this._bypassAnimation = newVal; this.layerData.bypassAnimation = newVal; } diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 978b239f..e294a69e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -100,7 +100,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - if (newVal !== this._bypassAnimation) { + if ((newVal !== this._bypassAnimation) && (typeof(this.trackData) !== "undefined")) { this._bypassAnimation = newVal; this.trackData.bypassAnimation = newVal; } -- cgit v1.2.3 From c6ef285c06905c28fe8915f9c4f916e74f6c8287 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 30 Mar 2012 14:58:38 -0700 Subject: Timeline: Link layerDragEnd and layerDrop events to better handle end of drag-and-drop events. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a82d3373..3eaf3dec 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1071,8 +1071,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // dragend doesn't fire. So if we're here in drop // and there's still a helper, we need to manually fire dragend. if (this._dragAndDropHelper !== null) { - this.container_layers.removeChild(this._dragAndDropHelper); - this._dragAndDropHelper = null; + this.handleLayerDragEnd(event); } } }, -- cgit v1.2.3 From 57f26309f7474c2b07eb9c42e0984f5b6b81cc7c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 30 Mar 2012 16:41:43 -0700 Subject: Timeline: Move drag-and-drop helper deletion to draw routine. Bug fix: better handling of drag-and-drop finish events and cleanup of helper. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 50 ++++++++++++++++------ 1 file changed, 37 insertions(+), 13 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 3eaf3dec..7ed33fda 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -305,9 +305,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Clear for future DnD this._dropLayerID = null; this._dragLayerID = null; + + // Sometimes, just to be fun, the drop and dragend events don't fire. + // So just in case, set the draw routine to delete the helper. + this._deleteHelper = true; + this.needsDraw = true; } } }, + _appendHelper: { + value: false + }, + _deleteHelper: { + value: false + }, /* === END: Models === */ /* === BEGIN: Draw cycle === */ prepareForDraw:{ @@ -329,7 +340,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { willDraw:{ value:function () { if (this._isLayer) { - // this.createNewLayer(); this._isLayer = false; } } @@ -351,6 +361,26 @@ var TimelinePanel = exports.TimelinePanel = 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.container_layers.querySelector(".timeline-dnd-helper"); + if (myHelper != null) { + this._dragAndDropHelper = myHelper; + } + } + if (this._dragAndDropHelper !== null) { + // We need to delete the helper. Can we delete it from container_layers? + if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { + this.container_layers.removeChild(this._dragAndDropHelper); + this._dragAndDropHelper = null; + this._deleteHelper = false; + } + } + + } } }, /* === END: Draw cycle === */ @@ -1043,7 +1073,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } this._dragAndDropHelperOffset = findYOffset(this.container_layers); this._appendHelper = true; - // this.container_layers.appendChild(this._dragAndDropHelper); + this._deleteHelper = false; } }, handleLayerDragover: { @@ -1056,23 +1086,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleLayerDragEnd : { value: function(event) { - // Delete the helper and clean up - if (this._dragAndDropHelper !== null) { - this.container_layers.removeChild(this._dragAndDropHelper); - this._dragAndDropHelper = null; - } + this._deleteHelper = true; + this.needsDraw = true; + } }, handleLayerDrop : { value: function(event) { event.stopPropagation(); event.preventDefault(); - // Usually drop fires after dragend, but sometimes - // dragend doesn't fire. So if we're here in drop - // and there's still a helper, we need to manually fire dragend. - if (this._dragAndDropHelper !== null) { - this.handleLayerDragEnd(event); - } + this._deleteHelper = true; + this.needsDraw = true; } }, /* === END: Controllers === */ -- cgit v1.2.3 From d480bea18450990131dc2e69b7f097aea1b26af0 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 2 Apr 2012 15:44:11 -0700 Subject: Timeline: Autoscrolling when dragging a layer within a scrollable layer list. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 86 ++++++++++++++-------- 1 file changed, 55 insertions(+), 31 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 7ed33fda..110f0336 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -319,6 +319,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _deleteHelper: { value: false }, + _scrollTracks: { + value: false + }, /* === END: Models === */ /* === BEGIN: Draw cycle === */ prepareForDraw:{ @@ -361,6 +364,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } this._dragAndDropHelperCoords = false; } + // Do we need to scroll the tracks? + if (this._scrollTracks !== false) { + this.layout_tracks.scrollTop = this._scrollTracks; + this._scrollTracks = false; + } // Do we have a helper to delete? if (this._deleteHelper === true) { if (this._dragAndDropHelper === null) { @@ -732,41 +740,42 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { createNewLayer:{ value:function (object) { - var hashVariable = 0; - - var newLayerName = "", - thingToPush = this.createLayerTemplate(), - myIndex = 0; + var hashVariable = 0, + newLayerName = "", + thingToPush = this.createLayerTemplate(), + myIndex = 0, + i = 0, + arrLayersLength = this.arrLayers.length; - this.currentLayerNumber = this.currentLayerNumber + 1; - newLayerName = "Layer " + this.currentLayerNumber; - thingToPush.layerData.layerName = newLayerName; - thingToPush.layerData.layerID = this.currentLayerNumber; - thingToPush.parentElement = this.application.ninja.currentSelectedContainer; - thingToPush.layerData.isSelected = true; - thingToPush.layerData._isFirstDraw = true; - thingToPush.layerData.created = true; + this.currentLayerNumber = this.currentLayerNumber + 1; + newLayerName = "Layer " + this.currentLayerNumber; + thingToPush.layerData.layerName = newLayerName; + thingToPush.layerData.layerID = this.currentLayerNumber; + thingToPush.parentElement = this.application.ninja.currentSelectedContainer; + thingToPush.layerData.isSelected = true; + thingToPush.layerData._isFirstDraw = true; + thingToPush.layerData.created = true; + + for (i = 0; i < this.arrLayersLength; i++) { + this.arrLayers[i].layerData.isSelected = false; + this.arrLayers[i].layerData._isFirstDraw = false; + } - for (var i = 0; i < this.arrLayers.length; i++) { - this.arrLayers[i].layerData.isSelected = false; - this.arrLayers[i].layerData._isFirstDraw = 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]; + thingToPush.layerData.layerPosition = myIndex; + thingToPush.layerData.trackPosition = myIndex; + this.arrLayers.splice(myIndex, 0, thingToPush); - 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]; - 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); - } else { - thingToPush.layerData.layerPosition = myIndex; - this.arrLayers.splice(myIndex, 0, thingToPush); + } - } + this.selectLayer(myIndex); - this.selectLayer(myIndex); -// } } }, @@ -1062,6 +1071,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Get the offset var findYOffset = function(obj) { var curleft = curtop = 0; + if (obj.offsetParent) { do { curleft += obj.offsetLeft; @@ -1078,8 +1088,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleLayerDragover: { value: function(event) { - var currPos = 0; - currPos = event.y - this._dragAndDropHelperOffset -28; + var currPos = 0, + myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; + if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) { + this._scrollTracks = (this.user_layers.scrollTop - 10) + } + if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) { + this._scrollTracks = (this.user_layers.scrollTop - 20) + } + if ((myScrollTest > (this.user_layers.clientHeight + 10))) { + this._scrollTracks = (this.user_layers.scrollTop + 10) + } + if ((myScrollTest > (this.user_layers.clientHeight + 20))) { + this._scrollTracks = (this.user_layers.scrollTop + 20) + + } + currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28; this._dragAndDropHelperCoords = currPos + "px"; this.needsDraw = true; } -- cgit v1.2.3 From 6e9c9fd4d715567394038705e7a6ef7935e451d3 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 2 Apr 2012 17:11:30 -0700 Subject: Timeline: Bug fix: IKNINJA-1431, "Adding a new element to the stage with one layer in focus whose name is empty, Ninja creates an empty name layer for the element." --- js/panels/Timeline/Layer.reel/Layer.js | 69 ++++++++++++++------------- js/panels/Timeline/Layer.reel/css/Layer.css | 50 +++++++++++-------- js/panels/Timeline/Layer.reel/scss/Layer.scss | 9 ++++ 3 files changed, 74 insertions(+), 54 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index f1882985..bba113c0 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -67,10 +67,7 @@ var Layer = exports.Layer = Montage.create(Component, { /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ - serializable: true, - value:null, - writable:true, - enumerable:true + value: "Default Layer Name" }, layerName:{ @@ -79,20 +76,22 @@ var Layer = exports.Layer = Montage.create(Component, { return this._layerName; }, set:function(newVal){ - if (newVal !== this._layerName) { + console.log('Layer.layerName.set ', newVal); + this._layerEditable.value = newVal; this._layerName = newVal; this.layerData.layerName = newVal; - this.log('layerName setter: ' + newVal) - } + if (typeof(this.dynamicLayerName) !== "undefined") { + this.dynamicLayerName.value = newVal; + } + + console.log('layerName setter: ' + newVal) + } }, _layerID:{ - value:null, - writable:true, - serializable: true, - enumerable:true + value: "Default Layer ID" }, layerID:{ @@ -410,16 +409,25 @@ var Layer = exports.Layer = Montage.create(Component, { set:function(val){ this._layerData = val; if(this._layerData){ - this.setData(); + this.setData(true); } } }, setData:{ - value:function(){ - if (typeof(this.layerData) === "undefined") { + 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.arrLayerStyles = this.layerData.arrLayerStyles; @@ -438,7 +446,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dtextScaleY = this.layerData.dtextScaleY; this.dtextRotate = this.layerData.dtextRotate; this._isFirstDraw = this.layerData._isFirstDraw; - this.needsDraw = true; + this.needsDraw = boolNeedsDraw; } }, @@ -455,7 +463,7 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._bindingPoint) { this._bindingPoint = newVal; - this.setData(); + this.setData(true); } } }, @@ -478,23 +486,15 @@ var Layer = exports.Layer = Montage.create(Component, { // Initialize myself this.init(); - var that = this; - // 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", function(event) { - that.handleSelectorEditableBlur(event); - }, false); - this._layerEditable.addEventListener("change", function(event) { - that.dynamicLayerName.value = that._layerEditable.value; - that.needsDraw = true; - }, false); + this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false); + this._layerEditable.addEventListener("change", this.handleSelectorEditableChange.bind(this), false); + this._layerEditable.editingClass = "editable2"; this._layerEditable.value = this.layerName; - this._layerEditable.needsDraw = true; + //this._layerEditable.needsDraw = true; this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); @@ -510,7 +510,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.addEventListener("mousedown", this, false); this.element.addEventListener("click", this, false); - // Drag and drop event hanlders + // Drag and drop event handlers this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); this.element.addEventListener("dragover", this.handleDragover.bind(this), false); @@ -712,10 +712,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.deleteStyle(); } }, - handleSelectorEditableClick: { - value: function(event) { - } - }, handleSelectorEditableBlur : { value: function(event) { this.titleSelector.scrollLeft = 0; @@ -723,7 +719,12 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleSelectorEditableChange: { value: function(event) { - this.layerName = this.dynamicLayerName.value; + var newVal = "ONTD"; + if (this._layerEditable.value !== "") { + newVal = this._layerEditable.value; + } + this.dynamicLayerName.value = newVal; + this.layerName = newVal; this.needsDraw = true; } }, diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 8e36c2db..1aae8d67 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -139,7 +139,12 @@ font-size: 11px; } -/* line 130, ../scss/Layer.scss */ +/* line 132, ../scss/Layer.scss */ +.label-layer .collapsible-label br { + display: none; +} + +/* line 136, ../scss/Layer.scss */ .collapsible-clicker { position: absolute; width: 10px; @@ -152,23 +157,23 @@ background-repeat: no-repeat; } -/* line 141, ../scss/Layer.scss */ +/* line 147, ../scss/Layer.scss */ .collapsible-clicker.collapsible-collapsed { background-image: url(../images/icon-collapsed.png); } -/* line 144, ../scss/Layer.scss */ +/* line 150, ../scss/Layer.scss */ .collapsible-content .collapsible-clicker { left: 12px; } -/* line 147, ../scss/Layer.scss */ +/* line 153, ../scss/Layer.scss */ .container-layer .collapsible-content.collapsible-collapsed { height: 0px; overflow: hidden; } -/* line 153, ../scss/Layer.scss */ +/* line 159, ../scss/Layer.scss */ .label-layer .cssbutton, .label-style .cssbutton { width: 14px; @@ -178,21 +183,21 @@ background-repeat: no-repeat; } -/* line 160, ../scss/Layer.scss */ +/* line 166, ../scss/Layer.scss */ .label-layer .button-lock { background-image: url(../images/icon-lock.png); top: 3px; right: 27px; } -/* line 165, ../scss/Layer.scss */ +/* line 171, ../scss/Layer.scss */ .label-layer .button-visible { background-image: url(../images/icon-eye.png); top: 3px; right: 7px; } -/* line 170, ../scss/Layer.scss */ +/* line 176, ../scss/Layer.scss */ .label-style .button-add { background-image: url(../images/icon-plus.png); width: 15px; @@ -201,7 +206,7 @@ right: 11px; } -/* line 177, ../scss/Layer.scss */ +/* line 183, ../scss/Layer.scss */ .label-style .button-delete { background-image: url(../images/icon-minus.png); width: 15px; @@ -210,17 +215,17 @@ right: 31px; } -/* line 184, ../scss/Layer.scss */ +/* line 190, ../scss/Layer.scss */ .collapsible-content .layout-table { width: 99.9%; } -/* line 187, ../scss/Layer.scss */ +/* line 193, ../scss/Layer.scss */ .content-layer .collapsible-content { padding-left: 30px; } -/* line 190, ../scss/Layer.scss */ +/* line 196, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; @@ -229,24 +234,24 @@ text-align: left; } -/* line 197, ../scss/Layer.scss */ +/* line 203, ../scss/Layer.scss */ .collapsible-content .layout-table:first-child { border-top: 1px solid #505050; } -/* line 201, ../scss/Layer.scss */ +/* line 207, ../scss/Layer.scss */ .collapsible-content .hottextunit { width: auto; } -/* line 204, ../scss/Layer.scss */ +/* line 210, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 212, ../scss/Layer.scss */ +/* line 218, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -258,24 +263,29 @@ text-overflow: clip; } -/* line 223, ../scss/Layer.scss */ +/* line 228, ../scss/Layer.scss */ +.editable2 br { + display: inline; +} + +/* line 232, ../scss/Layer.scss */ .label-style .disabled { cursor: default; } /* styles elements */ -/* line 228, ../scss/Layer.scss */ +/* line 237, ../scss/Layer.scss */ .content-style .item-template { display: none; } -/* line 231, ../scss/Layer.scss */ +/* line 240, ../scss/Layer.scss */ .content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -/* line 235, ../scss/Layer.scss */ +/* line 244, ../scss/Layer.scss */ .style-row { height: 20px; } diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss index 12b6e599..80b88d4f 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -127,6 +127,12 @@ font-size: 11px; } + + +.label-layer .collapsible-label br { + display: none; +} + .collapsible-clicker { position: absolute; width: 10px; @@ -219,6 +225,9 @@ -webkit-user-select: text; text-overflow: clip; } +.editable2 br { + display: inline; +} .label-style .disabled { cursor: default; -- cgit v1.2.3