1 files changed, 70 insertions, 27 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 @@
                "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"}
+                    }
+                ]
            },
            "stageMode": {
@@ -321,7 +366,10 @@
                    "documentBar":          {"@": "documentBar"},
                    "ioMediator":           {"@": "ioMediator"},
                    "timeline":             {"@": "timeline"},
-                    "mainMenuController":   {"@": "mainMenuController"}
+                    "mainMenuController":   {"@": "mainMenuController"},
+                    "rightPanelContainer":  {"#": "rightPanelContainer" },
+                    "panelSplitter":     {"@": "splitter3"},
+                    "timelineSplitter":     {"@": "splitter4"}
                }
            }
        }
@@ -374,7 +422,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>
@@ -382,20 +432,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 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>