aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorValerio Virgillito2012-07-19 15:53:54 -0700
committerValerio Virgillito2012-07-19 15:53:54 -0700
commit6403ec6d21048c93138ddcbcc59fc4677121ed5e (patch)
tree43d371557e28383fb962cb86d1a478f3a35d7ff3
parentfc13ef1e806116bb7ece5bb06604fa4f5714a6ed (diff)
downloadninja-6403ec6d21048c93138ddcbcc59fc4677121ed5e.tar.gz
Timeline: updated livePreview to timeline play. Hide canvas and draw red outline
- Changed the play button to a toggle button - livePreview code in stage activated via bindings - Draw a red outline of the canvas when in play Signed-off-by: Valerio Virgillito <valerio@motorola.com>
-rwxr-xr-xjs/mediators/keyboard-mediator.js14
-rwxr-xr-xjs/models/app-model.js13
-rwxr-xr-xjs/ninja.reel/ninja.html3
-rwxr-xr-xjs/ninja.reel/ninja.js47
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html22
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js31
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css81
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss26
-rwxr-xr-xjs/stage/stage.reel/stage.js64
9 files changed, 173 insertions, 128 deletions
diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js
index f71356b6..a323b9c3 100755
--- a/js/mediators/keyboard-mediator.js
+++ b/js/mediators/keyboard-mediator.js
@@ -98,20 +98,6 @@ exports.KeyboardMediator = Montage.create(Component, {
98 value: function() { 98 value: function() {
99 document.addEventListener("keydown", this, false); 99 document.addEventListener("keydown", this, false);
100 document.addEventListener("keyup", this, false); 100 document.addEventListener("keyup", this, false);
101
102 this.addPropertyChangeListener("appModel.livePreview", this.handleLivePreview, false);
103 }
104 },
105
106 handleLivePreview: {
107 value: function() {
108 if(this.appModel.livePreview) {
109 document.removeEventListener("keydown", this, false);
110 document.removeEventListener("keyup", this, false);
111 } else {
112 document.addEventListener("keydown", this, false);
113 document.addEventListener("keyup", this, false);
114 }
115 } 101 }
116 }, 102 },
117 103
diff --git a/js/models/app-model.js b/js/models/app-model.js
index 52e298a5..1351921b 100755
--- a/js/models/app-model.js
+++ b/js/models/app-model.js
@@ -34,19 +34,6 @@ var Montage = require("montage/core/core").Montage,
34 34
35exports.AppModel = Montage.create(Component, { 35exports.AppModel = Montage.create(Component, {
36 36
37 _livePreview: {
38 value: false
39 },
40
41 livePreview: {
42 get: function() {
43 return this._livePreview;
44 },
45 set: function(value) {
46 this._livePreview = value;
47 }
48 },
49
50 _layoutView: { 37 _layoutView: {
51 value: "layoutAll" 38 value: "layoutAll"
52 }, 39 },
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 4f40a3f8..fbbfd066 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -268,7 +268,8 @@ POSSIBILITY OF SUCH DAMAGE.
268 "timeline": { 268 "timeline": {
269 "prototype": "js/panels/Timeline/TimelinePanel.reel", 269 "prototype": "js/panels/Timeline/TimelinePanel.reel",
270 "properties": { 270 "properties": {
271 "element": {"#": "timelinePanelComponent"} 271 "element": {"#": "timelinePanelComponent"},
272 "stage": {"@": "stage"}
272 }, 273 },
273 "bindings": { 274 "bindings": {
274 "currentDocument": {"<-": "@documentList.selectedObjects.0"} 275 "currentDocument": {"<-": "@documentList.selectedObjects.0"}
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 42d15d8b..24e47612 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -379,7 +379,6 @@ exports.Ninja = Montage.create(Component, {
379 this.eventManager.addEventListener("selectSubTool", this, false); 379 this.eventManager.addEventListener("selectSubTool", this, false);
380 this.eventManager.addEventListener("executePreview", this, false); 380 this.eventManager.addEventListener("executePreview", this, false);
381 381
382 this.addPropertyChangeListener("appModel.livePreview", this.executeLivePreview, false);
383 this.addPropertyChangeListener("appModel.debug", this.toggleDebug, false); 382 this.addPropertyChangeListener("appModel.debug", this.toggleDebug, false);
384 } 383 }
385 }, 384 },
@@ -535,42 +534,18 @@ exports.Ninja = Montage.create(Component, {
535 } 534 }
536 }, 535 },
537 536
538 executeLivePreview: { 537 // Turn on WebGL animation on/off
539 value: function() { 538 toggleWebGlAnimation: {
540 var transitionStopRule; 539 value: function(animate) {
541// this.stage.hideCanvas(this.appModel.livePreview); 540 Array.prototype.slice.call(elt.querySelectorAll('[data-RDGE-id]'),0).forEach(function(glCanvas) {
542 541 if(animate) {
543 if(this.appModel.livePreview) { 542 glCanvas.elementModel.shapeModel.GLWorld._previewAnimation = true;
544 transitionStopRule = "nj-css-garbage-selector"; 543 glCanvas.elementModel.shapeModel.GLWorld.restartRenderLoop();
545 this.stage.bindingView.hide = true; 544 } else if (!glCanvas.elementModel.shapeModel.animate ) {
546 } else { 545 glCanvas.elementModel.shapeModel.GLWorld._previewAnimation = false;
547 transitionStopRule = "*" 546 glCanvas.elementModel.shapeModel.GLWorld._canvas.task.stop();
548 this.stage.bindingView.hide = false;
549 }
550
551 this.application.ninja.stylesController._stageStylesheet.rules[0].selectorText = transitionStopRule;
552
553 this._toggleWebGlAnimation(this.appModel.livePreview);
554 }
555 },
556
557 // Turn on WebGL animation during preview
558 _toggleWebGlAnimation: {
559 value: function(inLivePreview) {
560 var glCanvases = this.currentDocument.model.views.design.iframe.contentWindow.document.querySelectorAll('[data-RDGE-id]'),
561 glShapeModel;
562 if(glCanvases) {
563 for(var i = 0, len = glCanvases.length; i<len; i++) {
564 glShapeModel = glCanvases[i].elementModel.shapeModel;
565 if(inLivePreview) {
566 glShapeModel.GLWorld._previewAnimation = true;
567 glShapeModel.GLWorld.restartRenderLoop();
568 } else if (!glShapeModel.animate ) {
569 glShapeModel.GLWorld._previewAnimation = false;
570 glShapeModel.GLWorld._canvas.task.stop();
571 }
572 } 547 }
573 } 548 });
574 } 549 }
575 }, 550 },
576 551
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index c287e68e..0d769c23 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -54,7 +54,6 @@ POSSIBILITY OF SUCH DAMAGE.
54 "playheadmarker": {"#": "playhead_marker"}, 54 "playheadmarker": {"#": "playhead_marker"},
55 "timetext" : {"#": "time_text"}, 55 "timetext" : {"#": "time_text"},
56 "timebar" : {"#": "time_bar"}, 56 "timebar" : {"#": "time_bar"},
57 "container_tracks" : {"#" : "container-tracks"},
58 "end_hottext" : {"@" : "endHottext"}, 57 "end_hottext" : {"@" : "endHottext"},
59 "container_layers" : {"#" : "container-layers"}, 58 "container_layers" : {"#" : "container-layers"},
60 "container_tracks" : {"#" : "container-tracks"}, 59 "container_tracks" : {"#" : "container-tracks"},
@@ -62,8 +61,23 @@ POSSIBILITY OF SUCH DAMAGE.
62 "checkable_animated" : {"#" : "checkable_animated"}, 61 "checkable_animated" : {"#" : "checkable_animated"},
63 "tl_configbutton" : {"#" : "tl-configbutton"}, 62 "tl_configbutton" : {"#" : "tl-configbutton"},
64 "checkable_lock" : {"#" : "checkable_lock"}, 63 "checkable_lock" : {"#" : "checkable_lock"},
65 "checkable_visible":{"#" : "checkable_visible"}, 64 "checkable_visible":{"#" : "checkable_visible"}
66 "play_button" : {"#" : "play_button"} 65
66 }
67 },
68
69 "playButton": {
70 "prototype": "montage/ui/toggle-button.reel",
71 "properties": {
72 "element": {"#": "play_button"},
73 "identifier": "playButton",
74 "pressedClass": "pausebutton",
75 "pressedLabel": "",
76 "unpressedLabel": "",
77 "pressed": false
78 },
79 "bindings": {
80 "pressed": {"<->": "@owner.stage.timelinePlay"}
67 } 81 }
68 }, 82 },
69 83
@@ -190,7 +204,7 @@ POSSIBILITY OF SUCH DAMAGE.
190 <div data-montage-id="leftpane_inside" class="leftinside"> 204 <div data-montage-id="leftpane_inside" class="leftinside">
191 <div data-montage-id="timeline_controller" class="timelinecontroller"> 205 <div data-montage-id="timeline_controller" class="timelinecontroller">
192 <div data-montage-id="timeline_controls" class="timelinecontrols"> 206 <div data-montage-id="timeline_controls" class="timelinecontrols">
193 <div data-montage-id="play_button" class="playbutton"></div> 207 <button data-montage-id="play_button" class="playbutton"></button>
194 <div data-montage-id="time_text" class="timetext">00:00:00</div> 208 <div data-montage-id="time_text" class="timetext">00:00:00</div>
195 </div> 209 </div>
196 </div> 210 </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 4e9771d4..521c315d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -36,6 +36,21 @@ var Montage = require("montage/core/core").Montage,
36 36
37var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 37var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
38 38
39 _stage: {
40 value: null
41 },
42
43 stage: {
44 get: function() {
45 return this._stage;
46 },
47 set: function(value) {
48 if(value) {
49 this._stage = value;
50 }
51 }
52 },
53
39 /* === BEGIN: Models === */ 54 /* === BEGIN: Models === */
40 _user_layers: { 55 _user_layers: {
41 value: null 56 value: null
@@ -1015,7 +1030,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1015 this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false); 1030 this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);
1016