1 files changed, 90 insertions, 30 deletions
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 8f6f6d7b..ead7f576 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -77,34 +77,83 @@
                "name": "Splitter",
                "properties": {
                    "element": {"#": "bottomSplitter"},
-                    "panel": {"#": "bottomPanelContainer"},
+                    "panel": {"@": "timeline"}
-                    "resizeBar": {"#": "timelineResizer"}
                }
            },
            "resizer1": {
-                "module": "js/panels/Resizer",
+                "module": "js/panels/resize-composer",
-                "name": "Resizer",
+                "name": "ResizeComposer",
                "properties": {
                    "element": {"#": "rightPanelResizer"},
-                    "id": "rightPanelResizer",
+                    "component": {"@": "owner"},
-                    "panel": {"#": "rightPanelContainer"},
+                    "yAxis": false
-                    "isVertical": false,
+                },
-                    "redrawStage": true
+                "listeners": [
-                }
+                    {
+                        "type": "resizeStart",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeMove",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeEnd",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
            "resizer2": {
-                "module": "js/panels/Resizer",
+                "module": "js/panels/resize-composer",
-                "name": "Resizer",
+                "name": "ResizeComposer",
                "properties": {
                    "element": {"#": "timelineResizer"},
-                    "id": "timelineResizer",
+                    "component": {"@": "owner"},
-                    "panel": {"#": "bottomPanelContainer"},
+                    "xAxis": false
-                    "isVertical": true,
+                },
-                    "isInversed": true,
+                "listeners": [
-                    "redrawStage": true
+                    {
-                }
+                        "type": "resizeStart",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeMove",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeEnd",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+            },
+            "Resizer": {
+                "module": "js/panels/resize-composer",
+                "name": "ResizeComposer",
+                "properties": {
+                    "element": {"#": "pasteboardResizer"},
+                    "component": {"@": "owner"}
+                },
+                "listeners": [
+                    {
+                        "type": "resizeStart",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeMove",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeEnd",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeReset",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
            "stageMode": {
@@ -267,6 +316,11 @@
                "name": "StylesController"
            },
+            "presetsController": {
+                "module": "js/controllers/presets-controller",
+                "name": "PresetsController"
+            },
            "filePickerController": {
                "module": "js/io/ui/file-picker/file-picker-controller",
                "name": "FilePickerController"
@@ -287,6 +341,13 @@
                "name": "MainMenuController"
            },
+            "focusManager": {
+                "object": "js/components/focus-manager.reel",
+                "properties": {
+                    "element": {"#": "focus-container" }
+                }
+            },
            "owner": {
                "module": "js/ninja.reel",
                "name": "Ninja",
@@ -308,13 +369,17 @@
                    "popupManager":         {"@": "popupManager1"},
                                        "colorController":      {"@": "colorController1"},
                    "stylesController":     {"@": "stylesController"},
+                    "presetsController":     {"@": "presetsController"},
                    "filePickerController": {"@": "filePickerController"},
                    "newFileController":    {"@": "newFileController"},
                    "coreIoApi":                {"@": "coreIoApi1"},
                    "documentBar":          {"@": "documentBar"},
                    "ioMediator":           {"@": "ioMediator"},
                    "timeline":             {"@": "timeline"},
-                    "mainMenuController":   {"@": "mainMenuController"}
+                    "mainMenuController":   {"@": "mainMenuController"},
+                    "rightPanelContainer":  {"#": "rightPanelContainer" },
+                    "panelSplitter":     {"@": "splitter3"},
+                    "timelineSplitter":     {"@": "splitter4"}
                }
            }
        }
@@ -367,7 +432,9 @@
                        <section id="mainContent">
                            <section id="rulerLeft"></section>
                            <section id="stageAndScenesContainer"></section>
+                            <section id="pasteboardResizer" class="pasteboardResizer resizeBar"></section>
                        </section>
+                        <section id="timelineResizer" class="timelineResizer resizeBar"></section>
                        <section id="stateBar">
                            <section id="documentBarContainer">
                                <div id="documentBar" class="documentBar"><a href="#">HTML</a></div>
@@ -375,20 +442,13 @@
                        </section>
                        <section id="breadCrumbComponent"></section>
+                        <div id="timelinePanelComponent" data-montage-id="timelinePanel" class="timelinePanel"></div>
-                        <section id="timelineResizer" class="timelineResizer resizeBar"></section>
-                        <section id="bottomPanelContainer" class="panelContainer">
-                            <section id="timelinePanel" class="panel">
-                                <div id="timelinePanelComponent"></div>
-                            </section>
-                        </section>
                    </section>
                </section>
                <section data-montage-id="rightPanelResizer" class="rightPanelResizer resizeBar"></section>
-                <section id="rightPanelContainer" class="rightPanelContainer panelContainer">
+                <section id="rightPanelContainer" data-montage-id="rightPanelContainer" class="rightPanelContainer panelContainer">
                    <section id="rightPanelContent" class="rightPanelContent">
                    </section>
                </section>
@@ -396,10 +456,10 @@
            <section data-montage-id="bottomSplitter" class="bottomSplitter splitter"></section>
        </section>
-        
-        <section id="popupWindows"></section>
-        <div id="modalContainer"></div>
+        <div data-montage-id="focus-container" class="hidden"></div>
+        <section id="popupWindows"></section>
    </div>

diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 8f6f6d7b..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": {
@@ -267,6 +316,11 @@
267	"name": "StylesController"	316	"name": "StylesController"
268	},	317	},
269		318
		319	"presetsController": {
		320	"module": "js/controllers/presets-controller",
		321	"name": "PresetsController"
		322	},
		323
270	"filePickerController": {	324	"filePickerController": {
271	"module": "js/io/ui/file-picker/file-picker-controller",	325	"module": "js/io/ui/file-picker/file-picker-controller",
272	"name": "FilePickerController"	326	"name": "FilePickerController"
@@ -287,6 +341,13 @@
287	"name": "MainMenuController"	341	"name": "MainMenuController"
288	},	342	},
289		343
		344	"focusManager": {
		345	"object": "js/components/focus-manager.reel",
		346	"properties": {
		347	"element": {"#": "focus-container" }
		348	}
		349	},
		350
290	"owner": {	351	"owner": {
291	"module": "js/ninja.reel",	352	"module": "js/ninja.reel",
292	"name": "Ninja",	353	"name": "Ninja",
@@ -308,13 +369,17 @@
308	"popupManager": {"@": "popupManager1"},	369	"popupManager": {"@": "popupManager1"},
309	"colorController": {"@": "colorController1"},	370	"colorController": {"@": "colorController1"},
310	"stylesController": {"@": "stylesController"},	371	"stylesController": {"@": "stylesController"},
		372	"presetsController": {"@": "presetsController"},
311	"filePickerController": {"@": "filePickerController"},	373	"filePickerController": {"@": "filePickerController"},
312	"newFileController": {"@": "newFileController"},	374	"newFileController": {"@": "newFileController"},
313	"coreIoApi": {"@": "coreIoApi1"},	375	"coreIoApi": {"@": "coreIoApi1"},
314	"documentBar": {"@": "documentBar"},	376	"documentBar": {"@": "documentBar"},
315	"ioMediator": {"@": "ioMediator"},	377	"ioMediator": {"@": "ioMediator"},
316	"timeline": {"@": "timeline"},	378	"timeline": {"@": "timeline"},
317	"mainMenuController": {"@": "mainMenuController"}	379	"mainMenuController": {"@": "mainMenuController"},
		380	"rightPanelContainer": {"#": "rightPanelContainer" },
		381	"panelSplitter": {"@": "splitter3"},
		382	"timelineSplitter": {"@": "splitter4"}
318	}	383	}
319	}	384	}
320	}	385	}
@@ -367,7 +432,9 @@
367	<section id="mainContent">	432	<section id="mainContent">
368	<section id="rulerLeft"></section>	433	<section id="rulerLeft"></section>
369	<section id="stageAndScenesContainer"></section>	434	<section id="stageAndScenesContainer"></section>
		435	<section id="pasteboardResizer" class="pasteboardResizer resizeBar"></section>
370	</section>	436	</section>
		437	<section id="timelineResizer" class="timelineResizer resizeBar"></section>
371	<section id="stateBar">	438	<section id="stateBar">
372	<section id="documentBarContainer">	439	<section id="documentBarContainer">
373	<div id="documentBar" class="documentBar"><a href="#">HTML</a></div>	440	<div id="documentBar" class="documentBar"><a href="#">HTML</a></div>
@@ -375,20 +442,13 @@
375	</section>	442	</section>
376		443
377	<section id="breadCrumbComponent"></section>	444	<section id="breadCrumbComponent"></section>
378		445	<div id="timelinePanelComponent" data-montage-id="timelinePanel" class="timelinePanel"></div>
379	<section id="timelineResizer" class="timelineResizer resizeBar"></section>
380
381	<section id="bottomPanelContainer" class="panelContainer">
382	<section id="timelinePanel" class="panel">
383	<div id="timelinePanelComponent"></div>
384	</section>
385	</section>
386	</section>	446	</section>
387	</section>	447	</section>
388		448
389	<section data-montage-id="rightPanelResizer" class="rightPanelResizer resizeBar"></section>	449	<section data-montage-id="rightPanelResizer" class="rightPanelResizer resizeBar"></section>
390		450
391	<section id="rightPanelContainer" class="rightPanelContainer panelContainer">	451	<section id="rightPanelContainer" data-montage-id="rightPanelContainer" class="rightPanelContainer panelContainer">
392	<section id="rightPanelContent" class="rightPanelContent">	452	<section id="rightPanelContent" class="rightPanelContent">
393	</section>	453	</section>
394	</section>	454	</section>
@@ -396,10 +456,10 @@
396		456
397	<section data-montage-id="bottomSplitter" class="bottomSplitter splitter"></section>	457	<section data-montage-id="bottomSplitter" class="bottomSplitter splitter"></section>
398	</section>	458	</section>
399
400	<section id="popupWindows"></section>
401		459
402	<div id="modalContainer"></div>	460	<div data-montage-id="focus-container" class="hidden"></div>
		461
		462	<section id="popupWindows"></section>
403		463
404	</div>	464	</div>
405		465