diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 296 |
1 files changed, 238 insertions, 58 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index d1cab096..7f4fee89 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -177,7 +177,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
177 | }, | 177 | }, |
178 | set:function (val) { | 178 | set:function (val) { |
179 | this._masterDuration = val; | 179 | this._masterDuration = val; |
180 | this.timebar.style.width = (this._masterDuration / 12) + "px"; | 180 | var intDur = Math.round(val/12), |
181 | strWidth = intDur + "px"; | ||
182 | this.timebar.style.width = strWidth; | ||
181 | } | 183 | } |
182 | }, | 184 | }, |
183 | 185 | ||
@@ -257,6 +259,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
257 | timeMarkerHolder:{ | 259 | timeMarkerHolder:{ |
258 | value:null | 260 | value:null |
259 | }, | 261 | }, |
262 | |||
263 | // Drag and Drop properties | ||
260 | _dragAndDropHelper : { | 264 | _dragAndDropHelper : { |
261 | value: false | 265 | value: false |
262 | }, | 266 | }, |
@@ -269,6 +273,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
269 | _dragLayerID : { | 273 | _dragLayerID : { |
270 | value: null | 274 | value: null |
271 | }, | 275 | }, |
276 | _draggingType: { | ||
277 | value: false | ||
278 | }, | ||
279 | draggingType: { | ||
280 | get: function() { | ||
281 | return this._draggingType; | ||
282 | }, | ||
283 | set: function(newVal) { | ||
284 | this._draggingType = newVal; | ||
285 | } | ||
286 | }, | ||
272 | 287 | ||
273 | layersDragged:{ | 288 | layersDragged:{ |
274 | value:[], | 289 | value:[], |
@@ -326,9 +341,30 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
326 | _scrollTracks: { | 341 | _scrollTracks: { |
327 | value: false | 342 | value: false |
328 | }, | 343 | }, |
344 | |||
345 | // Keyframe drag and drop properties | ||
346 | _draggingTrackId: { | ||
347 | value: false | ||
348 | }, | ||
349 | draggingTrackId: { | ||
350 | get: function() { | ||
351 | return this._draggingTrackId; | ||
352 | }, | ||
353 | set: function(newVal) { | ||
354 | this._draggingTrackId = newVal; | ||
355 | } | ||
356 | }, | ||
357 | |||
358 | |||
329 | useAbsolutePosition:{ | 359 | useAbsolutePosition:{ |
330 | value:true | 360 | value:true |
331 | }, | 361 | }, |
362 | _currentDocumentUuid: { | ||
363 | value: false | ||
364 | }, | ||
365 | _ignoreSelectionChanges: { | ||
366 | value: false | ||
367 | }, | ||
332 | /* === END: Models === */ | 368 | /* === END: Models === */ |
333 | /* === BEGIN: Draw cycle === */ | 369 | /* === BEGIN: Draw cycle === */ |
334 | prepareForDraw:{ | 370 | prepareForDraw:{ |
@@ -345,6 +381,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
345 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); | 381 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); |
346 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); | 382 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); |
347 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); | 383 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); |
384 | this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); | ||
385 | this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); | ||
348 | 386 | ||
349 | // Bind the handlers for the config menu | 387 | // Bind the handlers for the config menu |
350 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); | 388 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); |
@@ -364,47 +402,58 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
364 | } | 402 | } |
365 | }, | 403 | }, |
366 | 404 | ||
367 | draw: { | 405 | draw:{ |
368 | value: function() { | 406 | value: function() { |
407 | |||
369 | // Drag and Drop: | 408 | // Drag and Drop: |
370 | // Do we have a helper to append? | 409 | if (this.draggingType === "layer") { |
371 | if (this._appendHelper === true) { | 410 | |
372 | this.container_layers.appendChild(this._dragAndDropHelper); | 411 | // Do we have a helper to append? |
373 | this._appendHelper = false; | 412 | if (this._appendHelper === true) { |
374 | } | 413 | this.container_layers.appendChild(this._dragAndDropHelper); |
375 | // Do we need to move the helper? | 414 | this._appendHelper = false; |
376 | if (this._dragAndDropHelperCoords !== false) { | ||
377 | if (this._dragAndDropHelper !== null) { | ||
378 | this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords; | ||
379 | } | ||
380 | this._dragAndDropHelperCoords = false; | ||
381 | } | ||
382 | // Do we need to scroll the tracks? | ||
383 | if (this._scrollTracks !== false) { | ||
384 | this.layout_tracks.scrollTop = this._scrollTracks; | ||
385 | this._scrollTracks = false; | ||
386 | } | ||
387 | // Do we have a helper to delete? | ||
388 | if (this._deleteHelper === true) { | ||
389 | if (this._dragAndDropHelper === null) { | ||
390 | // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. | ||
391 | // Try and recover the helper so we can delete it. | ||
392 | var myHelper = this.container_layers.querySelector(".timeline-dnd-helper"); | ||
393 | if (myHelper != null) { | ||
394 | this._dragAndDropHelper = myHelper; | ||
395 | } | ||
396 | } | ||
397 | if (this._dragAndDropHelper !== null) { | ||
398 | // We need to delete the helper. Can we delete it from container_layers? | ||
399 | if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { | ||
400 | this.container_layers.removeChild(this._dragAndDropHelper); | ||
401 | this._dragAndDropHelper = null; | ||
402 | this._deleteHelper = false; | ||
403 | } | ||
404 | } | 415 | } |
405 | this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); | 416 | // Do we need to move the helper? |
406 | this.layersDragged =[]; | 417 | if (this._dragAndDropHelperCoords !== false) { |
418 | if (this._dragAndDropHelper !== null) { | ||
419 | this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords; | ||
420 | } | ||
421 | this._dragAndDropHelperCoords = false; | ||
422 | } | ||
423 | // Do we need to scroll the tracks? | ||
424 | if (this._scrollTracks !== false) { | ||
425 | this.layout_tracks.scrollTop = this._scrollTracks; | ||
426 | this._scrollTracks = false; | ||
427 | } | ||
428 | // Do we have a helper to delete? | ||
429 | if (this._deleteHelper === true) { | ||
430 | if (this._dragAndDropHelper === null) { | ||
431 | // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. | ||
432 | // Try and recover the helper so we can delete it. | ||
433 | var myHelper = this.container_layers.querySelector(".timeline-dnd-helper"); | ||
434 | if (myHelper != null) { | ||
435 | this._dragAndDropHelper = myHelper; | ||
436 | } | ||
437 | } | ||
438 | if (this._dragAndDropHelper !== null) { | ||
439 | // We need to delete the helper. Can we delete it from container_layers? | ||
440 | if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { | ||
441 | this.container_layers.removeChild(this._dragAndDropHelper); | ||
442 | this._dragAndDropHelper = null; | ||
443 | this._deleteHelper = false; | ||
444 | } | ||
445 | } | ||
446 | this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); | ||
447 | this.layersDragged =[]; | ||
448 | } | ||
449 | } else if (this.draggingType === "keyframe") { | ||
450 | // Do we need to scroll the tracks? | ||
451 | if (this._scrollTracks !== false) { | ||
452 | this.layout_tracks.scrollLeft = this._scrollTracks; | ||
453 | this._scrollTracks = false; | ||
454 | } | ||
407 | } | 455 | } |
456 | |||
408 | } | 457 | } |
409 | }, | 458 | }, |
410 | /* === END: Draw cycle === */ | 459 | /* === END: Draw cycle === */ |
@@ -519,8 +568,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
519 | // Bind all document-specific events (pass in true to unbind) | 568 | // Bind all document-specific events (pass in true to unbind) |
520 | _bindDocumentEvents : { | 569 | _bindDocumentEvents : { |
521 | value: function(boolUnbind) { | 570 | value: function(boolUnbind) { |
522 | var arrEvents = ["deleteLayerClick", | 571 | var arrEvents = [ "newLayer", |
523 | "newLayer", | ||
524 | "deleteLayer", | 572 | "deleteLayer", |
525 | "elementAdded", | 573 | "elementAdded", |
526 | "elementsRemoved", | 574 | "elementsRemoved", |
@@ -584,6 +632,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
584 | this.drawTimeMarkers(); | 632 | this.drawTimeMarkers(); |