1 files changed, 74 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 @@
                "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": {
@@ -327,7 +376,10 @@
                    "documentBar":          {"@": "documentBar"},
                    "ioMediator":           {"@": "ioMediator"},
                    "timeline":             {"@": "timeline"},
-                    "mainMenuController":   {"@": "mainMenuController"}
+                    "mainMenuController":   {"@": "mainMenuController"},
+                    "rightPanelContainer":  {"#": "rightPanelContainer" },
+                    "panelSplitter":     {"@": "splitter3"},
+                    "timelineSplitter":     {"@": "splitter4"}
                }
            }
        }
@@ -380,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>
@@ -388,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>

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>