diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 4 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 275 |
2 files changed, 230 insertions, 49 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 19709ca7..5c957619 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -20,6 +20,7 @@ | |||
20 | "track_container": {"#": "right_inside"}, | 20 | "track_container": {"#": "right_inside"}, |
21 | "timeline_leftpane" : {"#" : "leftpane_inside"}, | 21 | "timeline_leftpane" : {"#" : "leftpane_inside"}, |
22 | "layer_tracks": {"#": "layer_tracks"}, | 22 | "layer_tracks": {"#": "layer_tracks"}, |
23 | "layout_tracks": {"#": "layout_tracks"}, | ||
23 | "master_track": {"#": "master_track"}, | 24 | "master_track": {"#": "master_track"}, |
24 | "time_markers" : {"#": "timeline_markers"}, | 25 | "time_markers" : {"#": "timeline_markers"}, |
25 | "layerRepetition" : {"@": "repetition1"}, | 26 | "layerRepetition" : {"@": "repetition1"}, |
@@ -31,6 +32,7 @@ | |||
31 | "container_tracks" : {"#" : "container-tracks"}, | 32 | "container_tracks" : {"#" : "container-tracks"}, |
32 | "end_hottext" : {"@" : "endHottext"}, | 33 | "end_hottext" : {"@" : "endHottext"}, |
33 | "container_layers" : {"#" : "container-layers"}, | 34 | "container_layers" : {"#" : "container-layers"}, |
35 | "container_tracks" : {"#" : "container-tracks"}, | ||
34 | "timeline_disabler" : {"#" : "timeline-disabler"}, | 36 | "timeline_disabler" : {"#" : "timeline-disabler"}, |
35 | "checkable_relative" : {"#" : "checkable_relative"}, | 37 | "checkable_relative" : {"#" : "checkable_relative"}, |
36 | "checkable_absolute" : {"#" : "checkable_absolute"}, | 38 | "checkable_absolute" : {"#" : "checkable_absolute"}, |
@@ -210,7 +212,7 @@ | |||
210 | 212 | ||
211 | 213 | ||
212 | <div data-montage-id="layer_tracks" class="tl_layertracks"> | 214 | <div data-montage-id="layer_tracks" class="tl_layertracks"> |
213 | <div class="layout-tracks"> | 215 | <div class="layout-tracks" data-montage-id="layout_tracks"> |
214 | <div data-montage-id="playhead_marker" class="playheadmarker"></div> | 216 | <div data-montage-id="playhead_marker" class="playheadmarker"></div> |
215 | <div data-montage-id="master_track" class="mastertrack"> | 217 | <div data-montage-id="master_track" class="mastertrack"> |
216 | <div data-montage-id="time_bar" class="timebar"></div> | 218 | <div data-montage-id="time_bar" class="timebar"></div> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index d1cab096..8859e115 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); |
@@ -366,45 +404,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
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) { | ||
4 |