From a39bad832722a10f6556f91e94c3301a41f59bd5 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Mon, 6 Feb 2012 13:30:49 -0800
Subject: merge new timeline
Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
.../Timeline/TimelinePanel.reel/TimelinePanel.css | 6 -
.../Timeline/TimelinePanel.reel/TimelinePanel.html | 230 +++++++-
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 615 +++++++++++++--------
.../TimelinePanel.reel/css/TimelinePanel.css | 249 +++++++++
.../Timeline/TimelinePanel.reel/images/pause.png | Bin 0 -> 1076 bytes
.../Timeline/TimelinePanel.reel/images/play.png | Bin 0 -> 1190 bytes
.../TimelinePanel.reel/images/play_next.png | Bin 0 -> 1185 bytes
.../TimelinePanel.reel/images/play_prev.png | Bin 0 -> 1199 bytes
.../Timeline/TimelinePanel.reel/images/plus.png | Bin 0 -> 1133 bytes
.../TimelinePanel.reel/images/timetick.jpg | Bin 0 -> 737 bytes
.../Timeline/TimelinePanel.reel/images/trash.png | Bin 0 -> 1154 bytes
11 files changed, 847 insertions(+), 253 deletions(-)
delete mode 100644 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css
create mode 100644 js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/pause.png
create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play.png
create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_next.png
create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_prev.png
create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/plus.png
create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg
create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/trash.png
(limited to 'js/panels/Timeline/TimelinePanel.reel')
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css
deleted file mode 100644
index 7f1b0f7f..00000000
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
- </copyright> */
-
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 6849898b..35f348c7 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -1,32 +1,224 @@
<!DOCTYPE html>
-<!-- <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
- </copyright> -->
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" type="text/css" href="TimelinePanel.css">
+ <link rel="stylesheet" type="text/css" href="css/TimelinePanel.css">
+
+
<script type="text/montage-serialization">
- {
- "owner": {
- "module": "js/panels/Timeline/TimelinePanel.reel",
- "name": "TimelinePanel",
- "properties": {
- "element": {"#": "timeline_panel"}
- }
- }
-
- }
- </script>
+ {
+ "owner": {
+ "module": "js/panels/Timeline/TimelinePanel.reel",
+ "name": "TimelinePanel",
+ "properties": {
+ "element": {"#": "timeline_panel"},
+ "user_layers": {"#": "user_layers"},
+ "track_container": {"#": "right_inside"},
+ "layer_tracks": {"#": "layer_tracks"},
+ "master_track": {"#": "master_track"},
+ "newlayer_button": {"#": "newlayer_button"},
+ "deletelayer_button": {"#": "deletelayer_button"},
+ "time_markers" : {"#": "timeline_markers"},
+ "layerRepetition" : {"@": "repetition1"},
+ "trackRepetition" : {"@" : "repetition2"},
+ "playhead": {"#": "playhead"},
+ "playheadmarker": {"#": "playhead_marker"},
+ "timetext" : {"#": "time_text"}
+ }
+ },
+ "timelineResize" : {
+ "module": "js/panels/Resizer",
+ "name": "Resizer",
+ "properties": {
+ "element": {"#": "layer_resizer"},
+ "panel" : {"#" : "timeline_leftpane"},
+ "isVertical" : false,
+ "isInversed" : false
+ }
+ },
+
+
+ "repetition1": {
+ "module": "montage/ui/repetition.reel",
+ "name": "Repetition",
+ "properties": {
+ "element": {"#": "container-layers"},
+ "isSelectionEnabled" : true
+ },
+ "bindings": {
+ "objects": {
+ "boundObject": {"@": "owner"},
+ "boundObjectPropertyPath": "arrLayers",
+ "oneway": false
+ }
+ }
+ },
+ "layer" : {
+ "module" : "js/panels/Timeline/Layer.reel",
+ "name" : "Layer",
+ "properties" : {
+ "element": {"#": "container-layer"}
+ },
+ "bindings" : {
+ "layerName" : {
+ "boundObject" : {"@" : "repetition1"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.layerName",
+ "oneway" : false
+ },
+ "layerID" : {
+ "boundObject" : {"@" : "repetition1"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.layerID",
+ "oneway" : false
+ },
+ "arrLayerStyles" : {
+ "boundObject" : {"@" : "repetition1"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.arrLayerStyles",
+ "oneway" : false
+ },
+ "isMainCollapsed" : {
+ "boundObject" : {"@" : "repetition1"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed",
+ "oneway" : false
+ },
+ "isPositionCollapsed" : {
+ "boundObject" : {"@" : "repetition1"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.isPositionCollapsed",
+ "oneway" : false
+ },
+ "isTransformCollapsed" : {
+ "boundObject" : {"@" : "repetition1"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed",
+ "oneway" : false
+ },
+ "isStyleCollapsed" : {
+ "boundObject" : {"@" : "repetition1"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed",
+ "oneway" : false
+ }
+ }
+ },
+
+ "repetition2" : {
+ "module": "montage/ui/repetition.reel",
+ "name": "Repetition",
+ "properties": {
+ "element": {"#": "container-tracks"},
+ "isSelectionEnabled" : false
+ },
+ "bindings": {
+ "objects": {
+ "boundObject": {"@": "owner"},
+ "boundObjectPropertyPath": "arrTracks",
+ "oneway": false
+ }
+ }
+ },
+ "track" : {
+ "module" : "js/panels/Timeline/TimelineTrack.reel",
+ "name" : "TimelineTrack",
+ "properties" : {
+ "element": {"#": "container-track"}
+ },
+ "bindings" : {
+ "trackID" : {
+ "boundObject" : {"@" : "repetition2"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.trackID",
+ "oneway" : false
+ },
+ "tweens" : {
+ "boundObject" : {"@" : "repetition2"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.tweens",
+ "oneway" : false
+ },
+ "isMainCollapsed" : {
+ "boundObject" : {"@" : "repetition2"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed",
+ "oneway" : false
+ },
+ "isPositionCollapsed" : {
+ "boundObject" : {"@" : "repetition2"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.isPositionCollapsed",
+ "oneway" : false
+ },
+ "isTransformCollapsed" : {
+ "boundObject" : {"@" : "repetition2"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed",
+ "oneway" : false
+ },
+ "isStyleCollapsed" : {
+ "boundObject" : {"@" : "repetition2"},
+ "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed",
+ "oneway" : false
+ }
+ }
+ }
+ }
+ </script>
</head>
<body>
- <div id="timeline_panel">
-
+ <div id="timeline_panel" class="tl_container">
+
+ <div id="bread_crumb"></div>
+
+ <div id="main_timeline" class="maintimeline">
+
+
+ <div id="timeline_leftpane" class="tl_leftpane">
+ <div id="leftpane_inside" class="leftinside">
+ <div id="timeline_controller" class="timelinecontroller">
+ <div id="timeline_controls" class="timelinecontrols">
+ <div id="rewind_button" class="rewindbutton"></div>
+ <div id="play_button" class="playbutton"></div>
+ <div id="pause_button" class="pausebutton"></div>
+ <div id="forward_button" class="forwardbutton"></div>
+ <div id="time_text" class="timetext">00:00:00</div>
+ </div>
+ </div>
+
+
+
+ <div id="user_layers" class="userlayers">
+ <div id="master_layer" class="masterlayer">Master Layer</div>
+ <div id="container-layers">
+ <div id="container-layer"></div>
+ </div>
+ </div>
+
+ <div id="timeline_gutter" class="timelinegutter">
+ <div id="newlayer_button" class="newlayerbutton"></div>
+ <div id="deletelayer_button" class="deletelayerbutton"></div>
+ </div>
+ </div>
+ </div>
+
+ <div id="layer_resizer" class="layerresizer"></div>
+
+ <div id="timeline_rightpane" class="tl_rightpane">
+ <div id="right_inside" class="rightinside">
+ <div class="layout_markers">
+ <div id="timeline_markers" class="timelinemarkers">
+ <div id="playhead" class="playhead"></div>
+ </div>
+ </div>
+
+
+ <div id="layer_tracks" class="tl_layertracks">
+ <div class="layout-tracks">
+ <div id="playhead_marker" class="playheadmarker"></div>
+ <div id="master_track" class="mastertrack"></div>
+ <div id="container-tracks" class="container-tracks">
+ <div id="container-track"></div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ </div>
</div>
</body>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 9bf51e60..45899648 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1,295 +1,454 @@
-/* <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
-</copyright> */
-
var Montage = require("montage/core/core").Montage;
var Component = require("montage/ui/component").Component;
-var TimelineController = require("js/panels/Timeline/TimelineController").TimelineController;
+var Layer = require("js/panels/Timeline/Layer.reel").Layer;
+var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack;
+// var Track = require("js/panels/Timeline/Track.reel").Track;
var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
- tmpImg: { value: null},
+ hasTemplate: {
+ value: true
+ },
+
+ /* === BEGIN: Models === */
+
+ // Layer models: arrays for the data and repetition, current layer number,
+ _arrLayers : {
+ value: []
+ },
+ arrLayers: {
+ get: function() {
+ return this._arrLayers;
+ },
+ set: function(newVal) {
+ this._arrLayers = newVal;
+ }
+ },
+
+ _layerRepetition: {
+ value: null
+ },
+ layerRepetition: {
+ get: function() {
+ return this._layerRepetition;
+ },
+ set: function(newVal) {
+ this._layerRepetition = newVal;
+ }
+ },
+
+ currentLayerNumber:{
+ value:0
+ },
- templateDidLoad: {
- value: function() {
- /*
- this.tmpImg = document.createElement("img");
- this.tmpImg.width = 1879;
- this.tmpImg.height = 440;
- this.tmpImg.src = "images/timeline/timeline.png";
- */
- }
+ millisecondsOffset:{
+ value:5000
},
- prepareForDraw: {
- value: function() {
- this.element.style.background = "url('images/timeline/timeline.png')";
- this.element.style.width = "100%";
- this.element.style.height = "400px";
- this.element.style.backgroundPosition = "-5px -40px";
- }
+ // Track model
+ _arrTracks: {
+ serializable: true,
+ value: []
+ },
+ arrTracks: {
+ serializable: true,
+ get: function() {
+ return this._arrTracks;
+ },
+ set: function(newVal) {
+ this._arrTracks = newVal;
+ }
+ },
+ _trackRepetition: {
+ serializable: true,
+ value: null
+ },
+ trackRepetition : {
+ serializable: true,
+ get: function() {
+ return this._trackRepetition;
+ },
+ set: function(newVal) {
+ this._trackRepetition = newVal;
+ }
},
- init : {
- value : function()
- {
- this.buildTimelineView();
+ _selectedKeyframes:{
+ value:[]
+ },
+ selectedKeyframes:{
+ serializable: true,
+ get: function() {
+ return this._selectedKeyframes;
+ },
+ set: function(value){
+ this._selectedKeyframes = value;
}
},
- breadCrumbContainer:{
- value:null,
- writable:true,
- enumerable:true
- },
- controlsContainer:{
- value:null,
- writable:true,
- enumerable:true
- },
+ /* === END: Models === */
+
+ /* === BEGIN: Draw cycle === */
- timelineGutter:{
- value:null,
- writable:true,
- enumerable:true
- },
+ prepareForDraw: {
+ value: function() {
- userLayerContainer:{
- value:null,
- writable:true,
- enumerable:true
- },
+ this.eventManager.addEventListener("deleteLayerClick", this, false);
+ this.eventManager.addEventListener("newLayer", this, false);
+ this.eventManager.addEventListener("deleteLayer", this, false);
- currentLayerNumber:{
- value:1,
- writable:true,
- enumerable:true
+ this.initTimelineView();
+ }
},
-
- newLayerButton:{
- value:null,
- writable:true,
- enumerable:true
+ _isLayer: {
+ value: false
},
- deleteLayerButton:{
- value:null,
- writable:true,
- enumerable:true
+ willDraw: {
+ value: function() {
+ if (this._isLayer) {
+
+ this.insertLayer();
+ this._isLayer = false;
+ }
+ }
},
- newFolderButton:{
- value:null,
- writable:true,
- enumerable:true
- },
- buildTimelineView : {
- value:function(){
- var timeline = document.getElementById("timelinePanel");
-
- var mainTimelineContainer = document.createElement("div");
- mainTimelineContainer.style.backgroundColor = "#000000";
- mainTimelineContainer.style.width = "100%";
- mainTimelineContainer.style.height = "100%";
- mainTimelineContainer.style.overflow = "visible";
-
- timeline.appendChild(mainTimelineContainer);
-
- this.breadCrumbContainer = document.createElement("div");
- this.breadCrumbContainer.style.width = "100%";
- this.breadCrumbContainer.style.height = "20px";
- this.breadCrumbContainer.style.backgroundColor = "#111111";
-
- var timeControllerContainer = document.createElement("div");
- timeControllerContainer.style.width = "auto";
- timeControllerContainer.style.height = "20px";
- timeControllerContainer.style.backgroundColor = "#000000";
-
- this.controlsContainer = document.createElement("div");
- this.controlsContainer.style.width = "200px";
- this.controlsContainer.style.height = "20px";
- this.controlsContainer.style.backgroundColor = "#440000";
- this.controlsContainer.style.float = "left";
- this.controlsContainer.innerText = "Timeline Controller";
-
- var timeContainer = document.createElement("div");
- timeContainer.style.width = "inherit";
- timeContainer.style.height = "20px";
- timeContainer.style.backgroundColor = "#880000";
- timeContainer.style.float = "left";
- timeContainer.innerText = "Time markers";
-
- timeControllerContainer.appendChild(this.controlsContainer);
- timeControllerContainer.appendChild(timeContainer);
-
- var masterLayerContainer = document.createElement("div");
- masterLayerContainer.style.width = "100%";
- masterLayerContainer.style.height = "20px";
- masterLayerContainer.style.backgroundColor = "#111111";
- masterLayerContainer.style.border = "solid";
- masterLayerContainer.style.borderWidth = "thin";
- masterLayerContainer.style.borderColor = "#333333";
- masterLayerContainer.innerText = "MASTER Layer";
-
- this.userLayerContainer = document.createElement("div");
- this.userLayerContainer.style.width = "100%";
- this.userLayerContainer.style.height = "33px";
- this.userLayerContainer.style.backgroundColor = "#111111";
-
- this.timelineGutter = document.createElement("div");
- this.timelineGutter.style.position = "fixed";
- //this.timelineGutter.style.width = "inherit";
- this.timelineGutter.style.height = "20px";
- //this.timelineGutter.style.bottom = 0;
- this.timelineGutter.style.backgroundColor = "#000000";
- this.timelineGutter.style.zIndex = "100";
-
- var newLayerButton = document.createElement("button");
- newLayerButton.style.backgroundImage = "url(../MainApp/images/timeline/plus.png)";
- newLayerButton.style.backgroundRepeat = "no-repeat";
- newLayerButton.style.height = "18px";
- newLayerButton.style.width = "18px";
- //newLayerButton.textContent = "New Layer";
- newLayerButton.addEventListener("click", this.newLayerClickHandler.bind(this), false);
-
- //var newFolderButton = document.createElement("button");
- //newFolderButton.textContent = "New Folder";
-
- var newTrashButton = document.createElement("button");
- newTrashButton.style.backgroundImage = "url(../MainApp/images/timeline/trash.png)";
- newTrashButton.style.backgroundRepeat = "no-repeat";
- newTrashButton.style.height = "18px";
- newTrashButton.style.width = "18px";
- newTrashButton.addEventListener("click", this.deleteLayerClickHandler.bind(this), false);
-
- this.timelineGutter.appendChild(newLayerButton);
- //this.timelineGutter.appendChild(newFolderButton);
- this.timelineGutter.appendChild(newTrashButton);
-
- mainTimelineContainer.appendChild(this.breadCrumbContainer);
- mainTimelineContainer.appendChild(timeControllerContainer);
- mainTimelineContainer.appendChild(masterLayerContainer);
- mainTimelineContainer.appendChild(this.userLayerContainer);
- mainTimelineContainer.appendChild(this.timelineGutter);
-
- this.initBreadCrumb();
+
+ /* === END: Draw cycle === */
- this.layerArray = new Array();
+ /* === BEGIN: Controllers === */
+
+ // Initialize the timeline
+ initTimelineView : {
+ value:function(){
+
+ // Get some selectors for future use
+ this.layout_tracks = this.layer_tracks.querySelector(".layout-tracks");
+ this.layout_markers = this.element.querySelector(".layout_markers");
+
+ // Add event handlers on the buttons.
+ this.newlayer_button.identifier = "addLayer";
+ this.newlayer_button.addEventListener("click", this, false);
+ this.deletelayer_button.identifier = "deleteLayer";
+ this.deletelayer_button.addEventListener("click", this, false);
+
+ // Simultaneous scrolling of the layer and tracks
+ this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
+ this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
+
+ // Calculate and draw time markers
+ this.drawTimeMarkers();
+
+ // Default to one layer for new doc
+// this.newLayer();
+ NJevent('newLayer',1);
+ // TODO - add condition for existing doc and parse DOM for top level elements
}
},
- newLayerClickHandler:{
- value:function(){
- this.newLayer();
+ deselectKeyframes:{
+ value: function(){
+ for(var i in this.selectedKeyframes){
+ this.selectedKeyframes[i].deselect();
+ }
+ this.selectedKeyframes = null;
+ this.selectedKeyframes = new Array();
}
},
- deleteLayerClickHandler:{
+ updateLayerScroll:{
value:function(){
- this.deleteLayer();
+ // Link tracks and layers together for vertical scrolling
+ this.user_layers.scrollTop = this.layout_tracks.scrollTop;
+
+ // Link tracks and markers together for horizontal scrolling
+ this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft;
+
+ // Link tracks and master track together for horizontal scrolling?
+ this.master_track.scrollLeft = this.layout_tracks.scrollLeft;
}
},
- layerArray:{
- value:null,
- writable:true,
- enumerable:true
- },
+ handleAddLayerClick:{
+ value:function(event){
+ event.stopPropagation();
+ //this.newLayer();
+ this._isLayer = true;
+ this.needsDraw = true;
- selectedLayer:{
- value:null,
- writable:true,
- enumerable:true
+ }
},
- newLayer:{
- value:function(){
- var newLayerDiv = document.createElement("div");
- newLayerDiv.style.width = "inherit";
- newLayerDiv.style.height = "20px";
- newLayerDiv.style.backgroundColor = "#222222";
- newLayerDiv.style.border = "solid";
- newLayerDiv.style.borderWidth = "thin";
- newLayerDiv.style.borderColor = "#444444";
+ handleDeleteLayerClick:{
+ value:function(event){
+ event.stopPropagation();
+// this.deleteLayer();
+ this.removeLayer()
+ }
+ },
- newLayerDiv.innerText = "Layer " + this.currentLayerNumber;
- this.currentLayerNumber++;
+ handleNewLayer:{
+ value:function(event){
+ // Add a new layer. It should be added above the currently selected layer,
+ // Or at the end, if no layer is selected.
+ var newLayerName = "",
+ //thingToPush = Layer.create(),
+ thingToPush = {},
+ // newTrack = TimelineTrack.create(),
+ newTrack = {},
+ myIndex = 0;
- newLayerDiv.addEventListener("click", this.selectLayer.bind(this), false);
- this.userLayerContainer.appendChild(newLayerDiv);
+ if(event.detail._undoStatus){
- this.layerArray.push(newLayerDiv);
- console.log(this.layerArray);
- }
- },
+ this.arrLayers.splice(event.detail._layerPosition,0,event.detail._el)
+ this.arrTracks.splice(event.detail._layerPosition,0,event.detail._track)
- selectLayer:{
- value:function(ev){
- for(var i in this.layerArray){
- this.layerArray[i].style.backgroundColor = "#222222";
}
- ev.target.style.backgroundColor = "#444444";
- this.selectedLayer = ev.target;
- }
- },
+ else{
+ // Build the thingToPush object
+
+ this.currentLayerNumber = this.currentLayerNumber +1;
+ newLayerName = "Layer " + this.currentLayerNumber;
+ thingToPush.layerName = newLayerName;
+ thingToPush.layerID = this.currentLayerNumber;
+ thingToPush.isMainCollapsed = true;
+ thingToPush.isPositionCollapsed = true;
+ thingToPush.isTransformCollapsed = true;
+ thingToPush.isStyleCollapsed = false;
+ thingToPush.arrLayerStyles = [];
+
+ newTrack.trackID = this.currentLayerNumber;
+ newTrack.isMainCollapsed = true;
+ newTrack.isPositionCollapsed = true;
+ newTrack.isTransformCollapsed = true;
+ newTrack.isStyleCollapsed = false;
+ newTrack.tweens = [];
+
+ // If a layer is selcted, splice the new layer on top
+ // Otherwise, just push the new layer in at the bottom.
+
+ if (!!this.layerRepetition.selectedIndexes) {
+ myIndex = this.layerRepetition.selectedIndexes[0];
+ this.arrLayers.splice(myIndex, 0, thingToPush);
+ this.layerRepetition.selectedIndexes = [myIndex];
+ this._LayerUndoPosition = myIndex;
+ this.arrTracks.splice(myIndex, 0, newTrack);
+
+ } else {
+ this.arrLayers.push(thingToPush);
+ this.arrTracks.push(newTrack);
+ this._LayerUndoPosition = this.arrLayers.length-1;
+
+
- deleteLayer:{
- value:function(){
- if(this.selectedLayer){
- this.userLayerContainer.removeChild(this.selectedLayer);
- }
- for(var i in this.layerArray){
- if(this.layerArray[i] == this.selectedLayer){
- this.layerArray.splice(i,1);
}
+
+ this._LayerUndoObject = thingToPush;
+ this._LayerUndoIndex = thingToPush.layerID ;
+ this._LayerUndoStatus = true;
+
+ this._TrackUndoObject = newTrack;
+
+
}
+
+
}
},
- newFolder:{
+ handleDeleteLayer:{
+ value:function(event){
- },
+ if (this.arrLayers.length > 0) {
- deleteFolder:{
+ if(event.detail._undoStatus){
- },
+ this.arrLayers.splice(event.detail._layerPosition,1)
+ this.arrTracks.splice(event.detail._layerPosition,1)
- initBreadCrumb : {
- value:function(){
- var mainBodyButton = document.createElement("button");
- mainBodyButton.textContent = "Body";
- this.breadCrumbContainer.appendChild(mainBodyButton);
- }
- },
- initControlsContainer:{
- value:function(){
- // create timeline control buttons for play,stop,etc
+ }else{
+
+ if (!!this.layerRepetition.selectedIndexes) {
+
+ var myIndex = this.layerRepetition.selectedIndexes[0];
+ this._LayerUndoObject=this.arrLayers[myIndex]
+ this._TrackUndoObject=this.arrTracks[myIndex]
+ this.arrLayers.splice(myIndex, 1);
+ this.arrTracks.splice(myIndex, 1);
+ this._LayerUndoIndex = this._LayerUndoObject.layerID;
+ this._LayerUndoPosition = myIndex;
+
+ } else {
+ this._LayerUndoPosition = this.arrLayers.length-1
+ this._LayerUndoObject = this.arrLayers.pop();
+ this._LayerUndoIndex = this._LayerUndoObject.layerID;
+ this._TrackUndoObject = this.arrTracks.pop();
+
+ //alert('TODO: what should happen when no layer is selected and the user clicks the delete button?')
+ }
+
+ this._LayerUndoStatus = true;
+ }
+
+ // TODO: actually remove the selected style from the layer. (Maybe by publishing an event?)
+ }
}
},
+
drawTimeMarkers:{
value:function(){
-
+ var i;
+ var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80);
+ for(i=0;i<totalMarkers;i++){
+ var timeMark = document.createElement("div");
+ var markValue = this.calculateTimeMarkerValue(i);
+ timeMark.className = "timemark";
+ timeMark.innerHTML = markValue;
+ this.time_markers.appendChild(timeMark);
+ }
}
},
- calculateTimeMarkerSpacing:{
- value:function(){
-
+
+ calculateTimeMarkerValue:{
+ value:function(currentMarker){
+ var timeToReturn;
+ var currentMilliseconds = currentMarker * this.millisecondsOffset;
+
+ var sec = (Math.floor((currentMilliseconds/1000)))%60;
+ var min = (Math.floor((currentMilliseconds/1000)/60))%60;
+
+ var milliSec = String(Math.round(currentMilliseconds/10));
+ var returnMillisec = milliSec.slice(milliSec.length-2, milliSec.length);
+
+ var returnSec;
+ var returnMin;
+ if(sec < 10){
+ returnSec = "0" + sec;
+ } else {
+ returnSec = sec;
+ }
+ if(min < 10){
+ returnMin = "0" + min;
+ } else {
+ returnMin = min;
+ }
+ if(currentMarker == 0) {
+ returnMillisec = "00";
+ }
+
+ timeToReturn = returnMin + ":" + returnSec + ":" + returnMillisec;
+
+ return timeToReturn;
}
},
- initMasterLayer:{
- value:function(){
+
+
+ insertLayer: {
+ value: function() {
+
+ var cmd = this.addLayerCommand();
+ cmd.execute();
+ cmd._el=this._LayerUndoObject;
+ cmd._layerID = this._LayerUndoIndex;
+ cmd._layerPosition = this._LayerUndoPosition
+ cmd._undoStatus = this._LayerUndoStatus;
+ cmd._track = this._TrackUndoObject;
+
+ NJevent("sendToUndo", cmd);
+
+
}
},
- initUserLayers:{
- value:function(){
-
+
+ removeLayer: {
+ value: function() {
+
+ var cmd = this.deleteLayerCommand();
+ cmd.execute();
+ cmd._el=this._LayerUndoObject;
+ cmd._layerID = this._LayerUndoIndex;
+ cmd._layerPosition = this._LayerUndoPosition
+ cmd._undoStatus = this._LayerUndoStatus;
+ cmd._track = this._TrackUndoObject;
+
+ NJevent("sendToUndo", cmd);
+
+
}
- }
+ },
+
+ addLayerCommand: {
+ value : function(){
+ var command;
+
+ command = Object.create(Object.prototype, {
+
+ _el:{value:null,writable:true},
+ _layerID:{value:null,writable:true},
+ _layerPosition:{value:null,writable:true},
+ _undoStatus:{value:false,writable:true},
+ _track:{value:null,writable:true},
+
+
+ description: { value: "Add Layer"},
+ receiver : {value: TimelinePanel},
+
+ execute: {
+ value: function() {
+
+ NJevent('newLayer',this)
+
+ }
+ },
+
+ unexecute: {
+ value: function() {
+
+
+ NJevent('deleteLayer',this)
+
+ }
+ }
+ });
+
+ return command;
+ }
+ },
+
+
+ deleteLayerCommand: {
+ value : function(){
+ var command;
+
+
+ command = Object.create(Object.prototype, {
+
+
+ description: { value: "Delete Layer"},
+ receiver : {value: TimelinePanel},
+
+ execute: {
+ value: function() {
+ NJevent('deleteLayer',this)
+ }
+ },
+
+ unexecute: {
+ value: function() {
+ NJevent('newLayer',this)
+
+ }
+ }
+ });
+
+ return command;
+ }
+ }
+ /* === END: Controllers === */
});
\ No newline at end of file
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
new file mode 100644
index 00000000..0a73705a
--- /dev/null
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -0,0 +1,249 @@
+.tl_container{
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ height: 100%;
+}
+.maintimeline{
+ border-style: double;
+ -webkit-box-flex: 1;
+ display: -webkit-box;
+ -webkit-box-orient: horizontal
+ height : 100%;
+}
+.leftinside{
+ height: 100%;
+ width: 100%;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ position:absolute;
+ overflow: hidden;
+}
+.rightinside{
+ height: 100%;
+ width: 100%;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ position:absolute;
+}
+.tl_leftpane{
+ min-width: 200px;
+ position: relative;
+ overflow: hidden;
+ -webkit-box-flex: 0;
+}
+.tl_rightpane{
+ width: 100%;
+ position: relative;
+ -webkit-box-flex: 1;
+}
+
+#bottomPanelContainer {
+ overflow: hidden !IMPORTANT;
+}
+
+.layout-tracks {
+ width: 100%;
+ height: 100%;
+ padding-bottom: 6px;
+ box-sizing: border-box;
+ overflow: auto;
+ position: relative;
+}
+.tl_layertracks{
+ background-color: #222;
+ height: 100%;
+ width: 100%;
+ -webkit-box-flex: 1;
+ padding-top: 21px;
+ box-sizing: border-box;
+}
+.layerresizer{
+ height: auto;
+ width:6px;
+ border-right-style: solid;
+ border-right-color: #333;
+ border-right-width: thin;
+ border-left-style: solid;
+ border-left-color: #000;
+ border-left-width: thin;
+ background-color: #222;
+ cursor: col-resize;
+ -webkit-box-flex: 0;
+}
+.timelinecontroller{
+ height:20px;
+ background-color: #222;
+ -webkit-box-flex: 0;
+ border-bottom-style: solid;
+ border-bottom-width: thin;
+ border-bottom-color: #000;
+}
+.timelinecontrols{
+ width: 100%;
+ padding-left: 6px;
+ padding-top: 2px;
+ height: 18px;
+ background-color: #222;
+ float: left;
+}
+.timetext{
+ float: right;
+ padding-right: 10px;
+ color: white;
+}
+.rewindbutton{
+ background-image: url('../images/play_prev.png');
+ background-repeat: no-repeat;
+ height: 18px;
+ width: 18px;
+ float: left;
+ padding-right: 5px;
+}
+.playbutton{
+ background-image: url('../images/play.png');
+ background-repeat: no-repeat;
+ height: 18px;
+ width: 18px;
+ float: left;
+ padding-right: 5px;
+}
+.pausebutton{
+ background-image: url('../images/pause.png');
+ background-repeat: no-repeat;
+ height: 18px;
+ width: 18px;
+ float: left;
+ padding-right: 5px;
+}
+.forwardbutton{
+ background-image: url('../images/play_next.png');
+ background-repeat: no-repeat;
+ height: 18px;
+ width: 18px;
+ float: left;
+ padding-right: 5px;
+}
+.timelinemarkers{
+ height: 20px;
+ width: 100%;
+ background-color: #222;
+ border-bottom-style: solid;
+ border-bottom-width: thin;
+ border-bottom-color: #000;
+ -webkit-box-flex: 0;
+ position: absolute;
+ background-image: url("../images/timetick.jpg");
+ overflow: visible;
+}
+.layout_markers {
+ position: absolute;
+ overflow: hidden;
+ top: 0px;
+ left: 0px;
+ height: 20px;
+ width: 100%;
+}
+
+.masterlayer{
+ font-family: 'Droid Sans';
+ font-size: 12px;
+ text-shadow: 1px 1px 1px black;
+ height: 18px;
+ background-color: #474747;
+ border-bottom-style: solid;
+ border-bottom-width: thin;
+ border-bottom-color: #555;
+ color: white;
+ padding-left: 15px;
+ padding-top: 2px;
+}
+.mastertrack{
+ -webkit-box-flex: 0;
+ color: white;
+ height: 20px;
+ width: 100%;
+ border-bottom-style: solid;
+ border-bottom-width: thin;
+ border-bottom-color: #444;
+ background-color: #222;
+ background-image: url("../../Track.reel/images/gridline.jpg");
+}
+
+.container-tracks,
+.timelinemarkers,
+.mastertrack {
+ width: 2000px;
+}
+.userlayers{
+ width: 100%;
+ background-color: #222;
+ -webkit-box-flex: 1;
+ overflow: hidden;
+ border-bottom-style: solid;
+ border-bottom-width: thin;
+ border-bottom-color: #000;
+}
+.timelinegutter{
+ height: 16px;
+ padding-top: 1px;
+ padding-left: 6px;
+ -webkit-box-flex: 0;
+ background-color: #222;
+ border-top-style: solid;
+ border-top-width: thin;
+ border-top-color: #444;
+}
+.newlayerbutton{
+ background-image: url('../images/plus.png');
+ background-repeat: no-repeat;
+ height: 16px;
+ width: 16px;
+ float: left;
+ padding-right: 5px;
+}
+.deletelayerbutton{
+ background-image: url('../images/trash.png');
+ background-repeat: no-repeat;
+ height: 16px;
+ width: 16px;
+ float: left;
+ padding-right: 5px;
+}
+.tracktick{
+ height: 100%;
+ width: 15px;
+ border-right-color: #444;
+ border-right-style: solid;
+ border-right-width: thin;
+ float: left;
+}
+.timemark{
+ font-family: 'Droid Sans';
+ font-size: 12px;
+ text-shadow: 1px 1px 1px black;
+ width: 76px;
+ color: #808080;
+ float: left;
+ padding-top: 6px;
+ padding-left: 4px;
+ text-align: left;
+}
+.playhead{
+ height: 14px;
+ width: 6px;
+ position: absolute;
+ top: 6px;
+ left: -3px;
+ z-index: 912;
+ background-color: #b50003;
+ opacity: 0.5;
+}
+.playheadmarker{
+ height: 100%;
+ width: 1px;
+ background-color: #cccccc;
+ top: 0px;
+ left: 0px;
+ position: absolute;
+ z-index: 913;
+}
\ No newline at end of file
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/pause.png b/js/panels/Timeline/TimelinePanel.reel/images/pause.png
new file mode 100644
index 00000000..8da01b9a
Binary files /dev/null and b/js/panels/Timeline/TimelinePanel.reel/images/pause.png differ
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/play.png b/js/panels/Timeline/TimelinePanel.reel/images/play.png
new file mode 100644
index 00000000..51a34bd4
Binary files /dev/null and b/js/panels/Timeline/TimelinePanel.reel/images/play.png differ
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/play_next.png b/js/panels/Timeline/TimelinePanel.reel/images/play_next.png
new file mode 100644
index 00000000..660130e4
Binary files /dev/null and b/js/panels/Timeline/TimelinePanel.reel/images/play_next.png differ
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/play_prev.png b/js/panels/Timeline/TimelinePanel.reel/images/play_prev.png
new file mode 100644
index 00000000..30a801b2
Binary files /dev/null and b/js/panels/Timeline/TimelinePanel.reel/images/play_prev.png differ
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/plus.png b/js/panels/Timeline/TimelinePanel.reel/images/plus.png
new file mode 100644
index 00000000..83c5ecd9
Binary files /dev/null and b/js/panels/Timeline/TimelinePanel.reel/images/plus.png differ
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg b/js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg
new file mode 100644
index 00000000..578298b8
Binary files /dev/null and b/js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg differ
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/trash.png b/js/panels/Timeline/TimelinePanel.reel/images/trash.png
new file mode 100644
index 00000000..cfc10484
Binary files /dev/null and b/js/panels/Timeline/TimelinePanel.reel/images/trash.png differ
--
cgit v1.2.3
From cf2f83be020d7d14f22177e0841472927d2fbcd7 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Mon, 6 Feb 2012 14:07:11 -0800
Subject: Integrate breadcrumb component and layer handling code
Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 746 +++++++++++++--------
1 file changed, 450 insertions(+), 296 deletions(-)
(limited to 'js/panels/Timeline/TimelinePanel.reel')
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 45899648..1c44c89f 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -2,43 +2,44 @@ var Montage = require("montage/core/core").Montage;
var Component = require("montage/ui/component").Component;
var Layer = require("js/panels/Timeline/Layer.reel").Layer;
var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack;
+
// var Track = require("js/panels/Timeline/Track.reel").Track;
var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
- hasTemplate: {
- value: true
- },
-
- /* === BEGIN: Models === */
-
- // Layer models: arrays for the data and repetition, current layer number,
- _arrLayers : {
- value: []
- },
- arrLayers: {
- get: function() {
- return this._arrLayers;
- },
- set: function(newVal) {
- this._arrLayers = newVal;
- }
- },
-
- _layerRepetition: {
- value: null
- },
- layerRepetition: {
- get: function() {
- return this._layerRepetition;
- },
- set: function(newVal) {
- this._layerRepetition = newVal;
- }
- },
-
- currentLayerNumber:{
- value:0
+ hasTemplate: {
+ value: true
+ },
+
+ /* === BEGIN: Models === */
+
+ // Layer models: arrays for the data and repetition, current layer number,
+ _arrLayers : {
+ value: []
+ },
+ arrLayers: {
+ get: function() {
+ return this._arrLayers;
+ },
+ set: function(newVal) {
+ this._arrLayers = newVal;
+ }
+ },
+
+ _layerRepetition: {
+ value: null
+ },
+ layerRepetition: {
+ get: function() {
+ return this._layerRepetition;
+ },
+ set: function(newVal) {
+ this._layerRepetition = newVal;
+ }
+ },
+
+ currentLayerNumber:{
+ value:0
},
millisecondsOffset:{
@@ -47,50 +48,36 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
// Track model
_arrTracks: {
- serializable: true,
- value: []
+ serializable: true,
+ value: []
},
arrTracks: {
- serializable: true,
- get: function() {
- return this._arrTracks;
- },
- set: function(newVal) {
- this._arrTracks = newVal;
- }
+ serializable: true,
+ get: function() {
+ return this._arrTracks;
+ },
+ set: function(newVal) {
+ this._arrTracks = newVal;
+ }
},
_trackRepetition: {
- serializable: true,
- value: null
+ serializable: true,
+ value: null
},
trackRepetition : {
- serializable: true,
- get: function() {
- return this._trackRepetition;
- },
- set: function(newVal) {
- this._trackRepetition = newVal;
- }
- },
-
- _selectedKeyframes:{
- value:[]
- },
-
- selectedKeyframes:{
serializable: true,
get: function() {
- return this._selectedKeyframes;
+ return this._trackRepetition;
},
- set: function(value){
- this._selectedKeyframes = value;
+ set: function(newVal) {
+ this._trackRepetition = newVal;
}
},
- /* === END: Models === */
-
- /* === BEGIN: Draw cycle === */
+ /* === END: Models === */
+
+ /* === BEGIN: Draw cycle === */
prepareForDraw: {
value: function() {
@@ -98,46 +85,55 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.eventManager.addEventListener("deleteLayerClick", this, false);
this.eventManager.addEventListener("newLayer", this, false);
this.eventManager.addEventListener("deleteLayer", this, false);
-
+ this.eventManager.addEventListener( "layerBinding", this, false);
+ this.eventManager.addEventListener("elementAdded", this, false);
+ this.eventManager.addEventListener("elementDeleted", this, false);
+ this.eventManager.addEventListener("deleteSelection", this, false);
+ this.hashInstance=this.createLayerHashTable();
+ this.hashTrackInstance=this.createTrackHashTable();
this.initTimelineView();
}
},
_isLayer: {
- value: false
+ value: false
},
- willDraw: {
- value: function() {
- if (this._isLayer) {
-
- this.insertLayer();
- this._isLayer = false;
- }
- }
+ _isLayerAdded:{
+ value:false
+ },
+
+ addButtonClicked:{
+ value:true
},
+ willDraw: {
+ value: function() {
+ if (this._isLayer) {
+ this.addButtonClicked=false;
+ this._isElementAdded=true;
+ NJevent('newLayer',this)
+ this._isLayer = false;
+ this.addButtonClicked=true;
+ }
+ }
+ },
-
/* === END: Draw cycle === */
- /* === BEGIN: Controllers === */
-
- // Initialize the timeline
+ /* === BEGIN: Controllers === */
+
+ // Initialize the timeline
initTimelineView : {
value:function(){
-
- // Get some selectors for future use
- this.layout_tracks = this.layer_tracks.querySelector(".layout-tracks");
- this.layout_markers = this.element.querySelector(".layout_markers");
-
- // Add event handlers on the buttons.
- this.newlayer_button.identifier = "addLayer";
- this.newlayer_button.addEventListener("click", this, false);
- this.deletelayer_button.identifier = "deleteLayer";
- this.deletelayer_button.addEventListener("click", this, false);
-
- // Simultaneous scrolling of the layer and tracks
- this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
+
+ // Add event handlers on the buttons.
+ this.newlayer_button.identifier = "addLayer";
+ this.newlayer_button.addEventListener("click", this, false);
+ this.deletelayer_button.identifier = "deleteLayer";
+ this.deletelayer_button.addEventListener("click", this, false);
+
+ // Simultaneous scrolling of the layer and tracks
+ this.layer_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
// Calculate and draw time markers
@@ -145,38 +141,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
// Default to one layer for new doc
// this.newLayer();
- NJevent('newLayer',1);
+ NJevent('newLayer');
// TODO - add condition for existing doc and parse DOM for top level elements
}
},
- deselectKeyframes:{
- value: function(){
- for(var i in this.selectedKeyframes){
- this.selectedKeyframes[i].deselect();
- }
- this.selectedKeyframes = null;
- this.selectedKeyframes = new Array();
- }
- },
-
updateLayerScroll:{
value:function(){
- // Link tracks and layers together for vertical scrolling
- this.user_layers.scrollTop = this.layout_tracks.scrollTop;
-
- // Link tracks and markers together for horizontal scrolling
- this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft;
-
- // Link tracks and master track together for horizontal scrolling?
- this.master_track.scrollLeft = this.layout_tracks.scrollLeft;
+ this.user_layers.scrollTop = this.layer_tracks.scrollTop;
+ this.master_track.scrollLeft = this.layer_tracks.scrollLeft;
}
},
handleAddLayerClick:{
value:function(event){
- event.stopPropagation();
- //this.newLayer();
+ event.stopPropagation();
this._isLayer = true;
this.needsDraw = true;
@@ -185,125 +164,312 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
handleDeleteLayerClick:{
value:function(event){
- event.stopPropagation();
-// this.deleteLayer();
- this.removeLayer()
+ event.stopPropagation();
+ this._deleteKeyDown=false;
+ NJevent('deleteLayer')
}
},
- handleNewLayer:{
+ handleLayerBinding:{
value:function(event){
- // Add a new layer. It should be added above the currently selected layer,
- // Or at the end, if no layer is selected.
- var newLayerName = "",
- //thingToPush = Layer.create(),
- thingToPush = {},
- // newTrack = TimelineTrack.create(),
- newTrack = {},
- myIndex = 0;
-
-
- if(event.detail._undoStatus){
-
- this.arrLayers.splice(event.detail._layerPosition,0,event.detail._el)
- this.arrTracks.splice(event.detail._layerPosition,0,event.detail._track)
-
- }
- else{
- // Build the thingToPush object
-
- this.currentLayerNumber = this.currentLayerNumber +1;
- newLayerName = "Layer " + this.currentLayerNumber;
- thingToPush.layerName = newLayerName;
- thingToPush.layerID = this.currentLayerNumber;
- thingToPush.isMainCollapsed = true;
- thingToPush.isPositionCollapsed = true;
- thingToPush.isTransformCollapsed = true;
- thingToPush.isStyleCollapsed = false;
- thingToPush.arrLayerStyles = [];
-
- newTrack.trackID = this.currentLayerNumber;
- newTrack.isMainCollapsed = true;
- newTrack.isPositionCollapsed = true;
- newTrack.isTransformCollapsed = true;
- newTrack.isStyleCollapsed = false;
- newTrack.tweens = [];
-
- // If a layer is selcted, splice the new layer on top
- // Otherwise, just push the new layer in at the bottom.
-
- if (!!this.layerRepetition.selectedIndexes) {
- myIndex = this.layerRepetition.selectedIndexes[0];
- this.arrLayers.splice(myIndex, 0, thingToPush);
- this.layerRepetition.selectedIndexes = [myIndex];
- this._LayerUndoPosition = myIndex;
- this.arrTracks.splice(myIndex, 0, newTrack);
-
- } else {
- this.arrLayers.push(thingToPush);
- this.arrTracks.push(newTrack);
- this._LayerUndoPosition = this.arrLayers.length-1;
-
-
+ var i=0;
+ this.currentParentNode=this.application.ninja.currentSelectedContainer.parentNode;
+ this.removeLayerFromParentUUid = this.application.ninja.currentSelectedContainer.parentNode.uuid;
+ this.currentElement= event.detail.element;
- }
+ while(this.arrLayers.pop()){
+ }
+ while(this.arrTracks.pop()){
+ }
- this._LayerUndoObject = thingToPush;
- this._LayerUndoIndex = thingToPush.layerID ;
- this._LayerUndoStatus = true;
- this._TrackUndoObject = newTrack;
-
+ this._hashKey = event.detail.element.uuid;
+ if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){
+ this.returnedTrack = this.hashTrackInstance.getItem(this._hashKey);
+ this._hashFind = true;
+ NJevent('newLayer');
}
-
}
},
- handleDeleteLayer:{
+ handleNewLayer:{
value:function(event){
+ // Add a new layer. It should be added above the currently selected layer,
+ // Or at the end, if no layer is selected.
+ var hashIndex =0 ,hashVariable=0,layerResult,trackResult,layerObject,trackObject,dLayer,parentNode;
+
+ if(this._hashFind){
+ while(layerResult = this.returnedObject[hashIndex]){
+ trackResult=this.returnedTrack[hashIndex];
+ if(layerResult.deleted!==true){
+ this.arrLayers.push(layerResult);
+ this.arrTracks.push(trackResult);
+ }
+ hashIndex++;
+ }
+ this._hashFind=false;
+ return;
+ }
- if (this.arrLayers.length > 0) {
+ if(this._isElementAdded){
+ if(this.addButtonClicked){
+ layerObject = this.hashInstance.getItem(this.application.ninja.currentSelectedContainer.uuid);
+ trackObject = this.hashTrackInstance.getItem(this.application.ninja.currentSelectedContainer.uuid);
+ if(layerObject!==undefined){
+ while(layerObject[hashVariable]){
+ if(event.detail.parentElement!==this.application.ninja.currentSelectedContainer){
+ dLayer=this.hashInstance.getItem(event.detail.parentNode.uuid);
+ while(dLayer[hashVariable]){
+ if(dLayer[hashVariable].element===event.detail){
+ dLayer[hashVariable].deleted=true;
+ parentNode=dLayer[hashVariable].parentElement;
+ break;
+ }
+ hashVariable++;
+ }
+ this._setBreadCrumb=true;
+ NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb});
+
+ }
+ else if(layerObject[hashVariable].element===event.detail){
+ this.arrLayers.splice(layerObject[hashVariable].layerPosition,0,layerObject[hashVariable]);
+ this.arrTracks.splice(trackObject[hashVariable].trackPosition,0,trackObject[hashVariable]);
+ this._isLayerAdded=true;
+ break;
+ }
+ hashVariable++;
+ this._isLayerAdded=false;
+ }
+ }
+ }
- if(event.detail._undoStatus){
+ if(this._isLayerAdded===false){
+ var newLayerName = "",
+ //thingToPush = Layer.create(),
+ thingToPush = {},
+ // newTrack = TimelineTrack.create(),
+ newTrack = {},
+ myIndex = 0;
+
+ // Build the thingToPush object
+
+ this.currentLayerNumber = this.currentLayerNumber +1;
+ newLayerName = "Layer " + this.currentLayerNumber;
+ thingToPush.layerName = newLayerName;
+ thingToPush.layerID = this.currentLayerNumber;
+ thingToPush.isMainCollapsed = true;
+ thingToPush.isPositionCollapsed = true;
+ thingToPush.isTransformCollapsed = true;
+ thingToPush.isStyleCollapsed = false;
+ thingToPush.arrLayerStyles = [];
+ thingToPush.element=this.layerElement;
+ thingToPush.deleted=false;
+ thingToPush.parentElement=this.application.ninja.currentSelectedContainer;
+ this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid;
+
+ newTrack.trackID = this.currentLayerNumber;
+ newTrack.isMainCollapsed = true;
+ newTrack.isPositionCollapsed = true;
+ newTrack.isTransformCollapsed = true;
+ newTrack.isStyleCollapsed = false;
+ newTrack.tweens = [];
+
+
+ // If a layer is selcted, splice the new layer on top
+ // Otherwise, just push the new layer in at the bottom.
+
+ if (!!this.layerRepetition.selectedIndexes) {
+ myIndex = this.layerRepetition.selectedIndexes[0];
+ this.hashInstance.setItem(this._hashKey,thingToPush,myIndex);
+ this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex);
+ thingToPush.layerPosition=myIndex;
+ newTrack.trackPosition=myIndex;
+ this.arrLayers.splice(myIndex, 0, thingToPush);
+ this.arrTracks.splice(myIndex, 0, newTrack);
+ this.layerRepetition.selectedIndexes = [myIndex];
+ } else {
+ this.arrLayers.push(thingToPush);
+ this.arrTracks.push(newTrack);
+ thingToPush.layerPosition=this.arrLayers.length-1;
+ newTrack.trackPosition=this.arrTracks.length-1;
+ this.hashInstance.setItem(this._hashKey,thingToPush,thingToPush.layerPosition);
+ this.hashTrackInstance.setItem(this._hashKey,newTrack,newTrack.trackPosition);
+
+ }
- this.arrLayers.splice(event.detail._layerPosition,1)
- this.arrTracks.splice(event.detail._layerPosition,1)
- }else{
+ }
+ }
+ }
+ },
- if (!!this.layerRepetition.selectedIndexes) {
+ handleDeleteLayer:{
+ value:function(event){
+ var dLayer,dTrack,parentNode,hashVariable=0,k=0,index=0,j=0;
+
+ if (this.arrLayers.length > 0) {
+ if(this._undoElementDeleted){
+ if(event.detail.dataset.parentUUID!==this.application.ninja.currentSelectedContainer.uuid){
+ dLayer=this.hashInstance.getItem(event.detail.dataset.parentUUID);
+ while(dLayer[hashVariable]){
+ if(dLayer[hashVariable].element===event.detail){
+ dLayer[hashVariable].deleted=true;
+ parentNode=dLayer[hashVariable].parentElement;
+ break;
+ }
+ hashVariable++;
+ }
+ this._setBreadCrumb=true;
+ NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb});
+ }else{
+ dLayer=this.hashInstance.getItem(event.detail.dataset.parentUUID)
+ while(dLayer[hashVariable]){
+ if(dLayer[hashVariable].deleted===true){
+
+ }else if(dLayer[hashVariable].element.uuid === event.detail.uuid){
+ while(this.arrLayers.length){
+ if(dLayer[hashVariable].layerID===this.arrLayers[k].layerID){
+ dLayer[hashVariable].deleted=true;
+ this.arrLayers.splice(k,1);
+ this.arrTracks.splice(k,1);
+ break;
+ }
+ k++;
+ }
+ }
+ hashVariable++;
+ }
+ }
+ }
+ else{
+ if (!!this.layerRepetition.selectedIndexes) {
+ var myIndex = this.layerRepetition.selectedIndexes[0];
+ dLayer = this.hashInstance.getItem(this._hashKey);
+ dTrack = this.hashTrackInstance.getItem(this._hashKey);
+ dLayer[myIndex].deleted=true;
+
+ this.arrLayers.splice(myIndex, 1);
+ this.arrTracks.splice(myIndex, 1);
+
+ } else if(this._deleteKeyDown) {
+ dLayer = this.hashInstance.getItem(this._hashKey);
+ dTrack = this.hashTrackInstance.getItem(this._hashKey);
+
+ if(this.deleteElement === this.application.ninja.curren