diff options
Diffstat (limited to 'js/ninja.reel')
-rwxr-xr-x | js/ninja.reel/ninja.html | 101 | ||||
-rwxr-xr-x | js/ninja.reel/ninja.js | 120 |
2 files changed, 194 insertions, 27 deletions
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index a4779ee3..ead7f576 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html | |||
@@ -77,34 +77,83 @@ | |||
77 | "name": "Splitter", | 77 | "name": "Splitter", |
78 | "properties": { | 78 | "properties": { |
79 | "element": {"#": "bottomSplitter"}, | 79 | "element": {"#": "bottomSplitter"}, |
80 | "panel": {"#": "bottomPanelContainer"}, | 80 | "panel": {"@": "timeline"} |
81 | "resizeBar": {"#": "timelineResizer"} | ||
82 | } | 81 | } |
83 | }, | 82 | }, |
84 | 83 | ||
85 | "resizer1": { | 84 | "resizer1": { |
86 | "module": "js/panels/Resizer", | 85 | "module": "js/panels/resize-composer", |
87 | "name": "Resizer", | 86 | "name": "ResizeComposer", |
88 | "properties": { | 87 | "properties": { |
89 | "element": {"#": "rightPanelResizer"}, | 88 | "element": {"#": "rightPanelResizer"}, |
90 | "id": "rightPanelResizer", | 89 | "component": {"@": "owner"}, |
91 | "panel": {"#": "rightPanelContainer"}, | 90 | "yAxis": false |
92 | "isVertical": false, | 91 | }, |
93 | "redrawStage": true | 92 | "listeners": [ |
94 | } | 93 | { |
94 | "type": "resizeStart", | ||
95 | "listener": {"@": "owner"} | ||
96 | }, | ||
97 | { | ||
98 | "type": "resizeMove", | ||
99 | "listener": {"@": "owner"} | ||
100 | }, | ||
101 | { | ||
102 | "type": "resizeEnd", | ||
103 | "listener": {"@": "owner"} | ||
104 | } | ||
105 | ] | ||
95 | }, | 106 | }, |
96 | 107 | ||
97 | "resizer2": { | 108 | "resizer2": { |
98 | "module": "js/panels/Resizer", | 109 | "module": "js/panels/resize-composer", |
99 | "name": "Resizer", | 110 | "name": "ResizeComposer", |
100 | "properties": { | 111 | "properties": { |
101 | "element": {"#": "timelineResizer"}, | 112 | "element": {"#": "timelineResizer"}, |
102 | "id": "timelineResizer", | 113 | "component": {"@": "owner"}, |
103 | "panel": {"#": "bottomPanelContainer"}, | 114 | "xAxis": false |
104 | "isVertical": true, | 115 | }, |
105 | "isInversed": true, | 116 | "listeners": [ |
106 | "redrawStage": true | 117 | { |
107 | } | 118 | "type": "resizeStart", |
119 | "listener": {"@": "owner"} | ||
120 | }, | ||
121 | { | ||
122 | "type": "resizeMove", | ||
123 | "listener": {"@": "owner"} | ||
124 | }, | ||
125 | { | ||
126 | "type": "resizeEnd", | ||
127 | "listener": {"@": "owner"} | ||
128 | } | ||
129 | ] | ||
130 | }, | ||
131 | |||
132 | "Resizer": { | ||
133 | "module": "js/panels/resize-composer", | ||
134 | "name": "ResizeComposer", | ||
135 | "properties": { | ||
136 | "element": {"#": "pasteboardResizer"}, | ||
137 | "component": {"@": "owner"} | ||
138 | }, | ||
139 | "listeners": [ | ||
140 | { | ||
141 | "type": "resizeStart", | ||
142 | "listener": {"@": "owner"} | ||
143 | }, | ||
144 | { | ||
145 | "type": "resizeMove", | ||
146 | "listener": {"@": "owner"} | ||
147 | }, | ||
148 | { | ||
149 | "type": "resizeEnd", | ||
150 | "listener": {"@": "owner"} | ||
151 | }, | ||
152 | { | ||
153 | "type": "resizeReset", | ||
154 | "listener": {"@": "owner"} | ||
155 | } | ||
156 | ] | ||
108 | }, | 157 | }, |
109 | 158 | ||
110 | "stageMode": { | 159 | "stageMode": { |
@@ -327,7 +376,10 @@ | |||
327 | "documentBar": {"@": "documentBar"}, | 376 | "documentBar": {"@": "documentBar"}, |
328 | "ioMediator": {"@": "ioMediator"}, | 377 | "ioMediator": {"@": "ioMediator"}, |
329 | "timeline": {"@": "timeline"}, | 378 | "timeline": {"@": "timeline"}, |
330 | "mainMenuController": {"@": "mainMenuController"} | 379 | "mainMenuController": {"@": "mainMenuController"}, |
380 | "rightPanelContainer": {"#": "rightPanelContainer" }, | ||
381 | "panelSplitter": {"@": "splitter3"}, | ||
382 | "timelineSplitter": {"@": "splitter4"} | ||
331 | } | 383 | } |
332 | } | 384 | } |
333 | } | 385 | } |
@@ -380,7 +432,9 @@ | |||
380 | <section id="mainContent"> | 432 | <section id="mainContent"> |
381 | <section id="rulerLeft"></section> | 433 | <section id="rulerLeft"></section> |
382 | <section id="stageAndScenesContainer"></section> | 434 | <section id="stageAndScenesContainer"></section> |
435 | <section id="pasteboardResizer" class="pasteboardResizer resizeBar"></section> | ||
383 | </section> | 436 | </section> |
437 | <section id="timelineResizer" class="timelineResizer resizeBar"></section> | ||
384 | <section id="stateBar"> | 438 | <section id="stateBar"> |
385 | <section id="documentBarContainer"> | 439 | <section id="documentBarContainer"> |
386 | <div id="documentBar" class="documentBar"><a href="#">HTML</a></div> | 440 | <div id="documentBar" class="documentBar"><a href="#">HTML</a></div> |
@@ -388,20 +442,13 @@ | |||
388 | </section> | 442 | </section> |
389 | 443 | ||
390 | <section id="breadCrumbComponent"></section> | 444 | <section id="breadCrumbComponent"></section> |
391 | 445 | <div id="timelinePanelComponent" data-montage-id="timelinePanel" class="timelinePanel"></div> | |
392 | <section id="timelineResizer" class="timelineResizer resizeBar"></section> | ||
393 | |||
394 | <section id="bottomPanelContainer" class="panelContainer"> | ||
395 | <section id="timelinePanel" class="panel"> | ||
396 | <div id="timelinePanelComponent"></div> | ||
397 | </section> | ||
398 | </section> | ||
399 | </section> | 446 | </section> |
400 | </section> | 447 | </section> |
401 | 448 | ||
402 | <section data-montage-id="rightPanelResizer" class="rightPanelResizer resizeBar"></section> | 449 | <section data-montage-id="rightPanelResizer" class="rightPanelResizer resizeBar"></section> |
403 | 450 | ||
404 | <section id="rightPanelContainer" class="rightPanelContainer panelContainer"> | 451 | <section id="rightPanelContainer" data-montage-id="rightPanelContainer" class="rightPanelContainer panelContainer"> |
405 | <section id="rightPanelContent" class="rightPanelContent"> | 452 | <section id="rightPanelContent" class="rightPanelContent"> |
406 | </section> | 453 | </section> |
407 | </section> | 454 | </section> |
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index c76c7d46..ca094936 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js | |||
@@ -23,6 +23,93 @@ exports.Ninja = Montage.create(Component, { | |||
23 | value: null | 23 | value: null |
24 | }, | 24 | }, |
25 | 25 | ||
26 | _isResizing: { | ||
27 | value: false | ||
28 | }, | ||
29 | _resizedHeight : { | ||
30 | value: 0 | ||
31 | }, | ||
32 | _height: { | ||
33 | value: null | ||
34 | }, | ||
35 | |||
36 | height: { | ||
37 | get: function() { | ||
38 | return this._height; | ||
39 | }, | ||
40 | set: function(val) { | ||
41 | if(this._height != val) { | ||
42 | this._height = val; | ||
43 | this.needsDraw = true; | ||
44 | } | ||
45 | |||
46 | } | ||
47 | }, | ||
48 | |||
49 | _resizedWidth : { | ||
50 | value: 0 | ||
51 | }, | ||
52 | _width: { | ||
53 | value: null | ||
54 | }, | ||
55 | |||
56 | width: { | ||
57 | get: function() { | ||
58 | return this._width; | ||
59 | }, | ||
60 | set: function(val) { | ||
61 | if(this._width != val) { | ||
62 | this._width = val; | ||
63 | this.needsDraw = true; | ||
64 | } | ||
65 | |||
66 | } | ||
67 | }, | ||
68 | |||
69 | handleResizeStart: { | ||
70 | value:function(e) { | ||
71 | this.isResizing = true; | ||
72 | this.height = parseInt(this.timeline.element.offsetHeight); | ||
73 | this.width = parseInt(this.rightPanelContainer.offsetWidth); | ||
74 | this.needsDraw = true; | ||
75 | } | ||
76 | }, | ||
77 | |||
78 | handleResizeMove: { | ||
79 | value:function(e) { | ||
80 | this._resizedHeight = e._event.dY; | ||
81 | this._resizedWidth = e._event.dX; | ||
82 | console.log("resizing"); | ||
83 | this.stage.resizeCanvases = true; | ||
84 | this.needsDraw = true; | ||
85 | } | ||
86 | }, | ||
87 | |||
88 | handleResizeEnd: { | ||
89 | value: function(e) { | ||
90 | this.height -= this._resizedHeight; | ||
91 | this.width -= this._resizedWidth; | ||
92 | this.stage.resizeCanvases = true; | ||
93 | this._resizedHeight = 0; | ||
94 | this._resizedWidth = 0; | ||
95 | this.isResizing = false; | ||
96 | this.needsDraw = true; | ||
97 | } | ||
98 | }, | ||
99 | |||
100 | handleResizeReset: { | ||
101 | value: function(e) { | ||
102 | this.width = 253; | ||
103 | this.height = 140; | ||
104 | this._resizedHeight = 0; | ||
105 |