diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/ninja.reel/ninja.html | 97 | ||||
-rwxr-xr-x | js/ninja.reel/ninja.js | 107 | ||||
-rwxr-xr-x | js/panels/Splitter.js | 2 | ||||
-rw-r--r-- | js/panels/resize-composer.js | 23 | ||||
-rwxr-xr-x | js/stage/stage-view.reel/stage-view.js | 12 |
5 files changed, 207 insertions, 34 deletions
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index f9e1efdd..b3545329 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html | |||
@@ -77,34 +77,79 @@ | |||
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 | ] | ||
108 | }, | 153 | }, |
109 | 154 | ||
110 | "stageMode": { | 155 | "stageMode": { |
@@ -321,7 +366,10 @@ | |||
321 | "documentBar": {"@": "documentBar"}, | 366 | "documentBar": {"@": "documentBar"}, |
322 | "ioMediator": {"@": "ioMediator"}, | 367 | "ioMediator": {"@": "ioMediator"}, |
323 | "timeline": {"@": "timeline"}, | 368 | "timeline": {"@": "timeline"}, |
324 | "mainMenuController": {"@": "mainMenuController"} | 369 | "mainMenuController": {"@": "mainMenuController"}, |
370 | "rightPanelContainer": {"#": "rightPanelContainer" }, | ||
371 | "panelSplitter": {"@": "splitter3"}, | ||
372 | "timelineSplitter": {"@": "splitter4"} | ||
325 | } | 373 | } |
326 | } | 374 | } |
327 | } | 375 | } |
@@ -374,7 +422,9 @@ | |||
374 | <section id="mainContent"> | 422 | <section id="mainContent"> |
375 | <section id="rulerLeft"></section> | 423 | <section id="rulerLeft"></section> |
376 | <section id="stageAndScenesContainer"></section> | 424 | <section id="stageAndScenesContainer"></section> |
425 | <section id="pasteboardResizer" class="pasteboardResizer resizeBar"></section> | ||
377 | </section> | 426 | </section> |
427 | <section id="timelineResizer" class="timelineResizer resizeBar"></section> | ||
378 | <section id="stateBar"> | 428 | <section id="stateBar"> |
379 | <section id="documentBarContainer"> | 429 | <section id="documentBarContainer"> |
380 | <div id="documentBar" class="documentBar"><a href="#">HTML</a></div> | 430 | <div id="documentBar" class="documentBar"><a href="#">HTML</a></div> |
@@ -382,20 +432,13 @@ | |||
382 | </section> | 432 | </section> |
383 | 433 | ||
384 | <section id="breadCrumbComponent"></section> | 434 | <section id="breadCrumbComponent"></section> |
385 | 435 | <div id="timelinePanelComponent" data-montage-id="timelinePanel" class="timelinePanel"></div> | |
386 | <section id="timelineResizer" class="timelineResizer resizeBar"></section> | ||
387 | |||
388 | <section id="bottomPanelContainer" class="panelContainer"> | ||
389 | <section id="timelinePanel" class="panel"> | ||
390 | <div id="timelinePanelComponent"></div> | ||
391 | </section> | ||
392 | </section> | ||
393 | </section> | 436 | </section> |
394 | </section> | 437 | </section> |
395 | 438 | ||
396 | <section data-montage-id="rightPanelResizer" class="rightPanelResizer resizeBar"></section> | 439 | <section data-montage-id="rightPanelResizer" class="rightPanelResizer resizeBar"></section> |
397 | 440 | ||
398 | <section id="rightPanelContainer" class="rightPanelContainer panelContainer"> | 441 | <section id="rightPanelContainer" data-montage-id="rightPanelContainer" class="rightPanelContainer panelContainer"> |
399 | <section id="rightPanelContent" class="rightPanelContent"> | 442 | <section id="rightPanelContent" class="rightPanelContent"> |
400 | </section> | 443 | </section> |
401 | </section> | 444 | </section> |
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 2a6e49f7..e29c5057 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js | |||
@@ -23,6 +23,80 @@ 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 | |||
26 | selectedElements: { | 100 | selectedElements: { |
27 | value: [] | 101 | value: [] |
28 | }, |