29 files changed, 770 insertions, 575 deletions
diff --git a/js/panels/Color/colorpanel.js b/js/panels/Color/colorpanel.js
index 4858be68..3a603e98 100755
--- a/js/panels/Color/colorpanel.js
+++ b/js/panels/Color/colorpanel.js
@@ -38,7 +38,7 @@ exports.ColorPanel = Montage.create(PanelBase, {
            ////////////////////////////////////////////////////////////
            ////////////////////////////////////////////////////////////
            //TODO: Remove and add via toolbar draw loop
-            this.application.ninja.colorController.createToolbar();
            ////////////////////////////////////////////////////////////
            ////////////////////////////////////////////////////////////
@@ -47,14 +47,7 @@ exports.ColorPanel = Montage.create(PanelBase, {
    },
    ////////////////////////////////////////////////////////////////////
    //Applying default colors only on first draw
-    handleFirstDraw: {
-        enumerable: true,
-        value: function (e) {
-                //
-                this.content.applyDefaultColors();
-                this.content.removeEventListener('firstDraw', this, false);
-        }
-    }
    ////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////
 });
 \ No newline at end of file
diff --git a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
index ff738bbe..af62dd07 100755
--- a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
@@ -117,10 +117,23 @@ exports.ColorPanelBase = Montage.create(Component, {
        enumerable: false,
        value: function() {
                //TODO: Remove temporary hack, color history should be initilized
+            this.addEventListener('firstDraw', this, false);
+            this.application.ninja.colorController.colorView = this;
                this.colorManager.colorHistory.fill = [{m: 'nocolor', c: {}, a: 1}];
                this.colorManager.colorHistory.stroke = [{m: 'nocolor', c: {}, a: 1}];
        }
    },
+    handleFirstDraw: {
+        enumerable: true,
+        value: function (e) {
+            //
+            this.application.ninja.colorController.createToolbar();
+            this.applyDefaultColors();
+            this.removeEventListener('firstDraw', this, false);
+        }
+    },
    ////////////////////////////////////////////////////////////////////
    //Assigning values and binding
    willDraw: {
diff --git a/js/panels/Panel.reel/Panel.html b/js/panels/Panel.reel/Panel.html
index 7556952c..04e2930a 100755
--- a/js/panels/Panel.reel/Panel.html
+++ b/js/panels/Panel.reel/Panel.html
@@ -8,22 +8,86 @@
 <head>
    <script type="text/montage-serialization">
        {
-            "resizer1": {
+            "Resizer": {
-                "module": "js/panels/Resizer",
+                "module": "js/panels/resize-composer",
-                "name": "Resizer",
+                "name": "ResizeComposer",
                "properties": {
                    "element": {"#": "resizeBar"},
-                    "panel": {"#": "panel"},
+                    "component": {"@": "owner"}
-                    "isVertical": true,
-                    "willSave": false
                },
-                "bindings": {
+                "listeners": [
-                    "ownerId": {
+                    {
-                        "boundObject": {"@": "owner"},
+                        "type": "resizeStart",
-                        "boundObjectPropertyPath": "panelBase.panelName",
+                        "listener": {"@": "owner"}
-                        "oneway": true
+                    },
+                    {
+                        "type": "resizeMove",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeEnd",
+                        "listener": {"@": "owner"}
                    }
-                }
+                ]
+            },
+            "DragDrop": {
+                "module": "js/panels/drag-drop-composer",
+                "name": "DragDropComposer",
+                "properties": {
+                    "element": {"@": "panelTitle"},
+                    "component": {"@": "owner"}
+                },
+                "listeners": [
+                    {
+                        "type": "dragStart",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "dropHover",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "dropped",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "dropEnd",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+            },
+            "btnCollapse": {
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
+                "properties": {
+                    "element": {"#": "btnCollapse"},
+                    "pressedClass": "hide",
+                    "identifier": "btnCollapse"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+            },
+            "btnClose": {
+                "module": "montage/ui/button.reel",
+                "name": "Button",
+                "properties": {
+                    "element": {"#": "btnClose"},
+                    "pressedClass": "hide",
+                    "identifier": "btnClose"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
            "slot1": {
@@ -34,14 +98,28 @@
                }
            },
+            "panelTitle": {

diff --git a/js/panels/Color/colorpanel.js b/js/panels/Color/colorpanel.js index 4858be68..3a603e98 100755 --- a/js/panels/Color/colorpanel.js +++ b/js/panels/Color/colorpanel.js
@@ -38,7 +38,7 @@ exports.ColorPanel = Montage.create(PanelBase, {
38	////////////////////////////////////////////////////////////	38	////////////////////////////////////////////////////////////
39	////////////////////////////////////////////////////////////	39	////////////////////////////////////////////////////////////
40	//TODO: Remove and add via toolbar draw loop	40	//TODO: Remove and add via toolbar draw loop
41	this.application.ninja.colorController.createToolbar();	41
42	////////////////////////////////////////////////////////////	42	////////////////////////////////////////////////////////////
43	////////////////////////////////////////////////////////////	43	////////////////////////////////////////////////////////////
44		44
@@ -47,14 +47,7 @@ exports.ColorPanel = Montage.create(PanelBase, {
47	},	47	},
48	////////////////////////////////////////////////////////////////////	48	////////////////////////////////////////////////////////////////////
49	//Applying default colors only on first draw	49	//Applying default colors only on first draw
50	handleFirstDraw: {	50
51	enumerable: true,
52	value: function (e) {
53	//
54	this.content.applyDefaultColors();
55	this.content.removeEventListener('firstDraw', this, false);
56	}
57	}
58	////////////////////////////////////////////////////////////////////	51	////////////////////////////////////////////////////////////////////
59	////////////////////////////////////////////////////////////////////	52	////////////////////////////////////////////////////////////////////
60	}); \ No newline at end of file	53	}); \ No newline at end of file


diff --git a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js index ff738bbe..af62dd07 100755 --- a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
@@ -117,10 +117,23 @@ exports.ColorPanelBase = Montage.create(Component, {
117	enumerable: false,	117	enumerable: false,
118	value: function() {	118	value: function() {
119	//TODO: Remove temporary hack, color history should be initilized	119	//TODO: Remove temporary hack, color history should be initilized
		120	this.addEventListener('firstDraw', this, false);
		121	this.application.ninja.colorController.colorView = this;
120	this.colorManager.colorHistory.fill = [{m: 'nocolor', c: {}, a: 1}];	122	this.colorManager.colorHistory.fill = [{m: 'nocolor', c: {}, a: 1}];
121	this.colorManager.colorHistory.stroke = [{m: 'nocolor', c: {}, a: 1}];	123	this.colorManager.colorHistory.stroke = [{m: 'nocolor', c: {}, a: 1}];
122	}	124	}
123	},	125	},
		126
		127	handleFirstDraw: {
		128	enumerable: true,
		129	value: function (e) {
		130	//
		131	this.application.ninja.colorController.createToolbar();
		132	this.applyDefaultColors();
		133	this.removeEventListener('firstDraw', this, false);
		134	}
		135	},
		136
124	////////////////////////////////////////////////////////////////////	137	////////////////////////////////////////////////////////////////////
125	//Assigning values and binding	138	//Assigning values and binding
126	willDraw: {	139	willDraw: {


diff --git a/js/panels/Panel.reel/Panel.html b/js/panels/Panel.reel/Panel.html index 7556952c..04e2930a 100755 --- a/js/panels/Panel.reel/Panel.html +++ b/js/panels/Panel.reel/Panel.html
@@ -8,22 +8,86 @@
8	<head>	8	<head>
9	<script type="text/montage-serialization">	9	<script type="text/montage-serialization">
10	{	10	{
11	"resizer1": {	11	"Resizer": {
12	"module": "js/panels/Resizer",	12	"module": "js/panels/resize-composer",
13	"name": "Resizer",	13	"name": "ResizeComposer",
14	"properties": {	14	"properties": {
15	"element": {"#": "resizeBar"},	15	"element": {"#": "resizeBar"},
16	"panel": {"#": "panel"},	16	"component": {"@": "owner"}
17	"isVertical": true,
18	"willSave": false
19	},	17	},
20	"bindings": {	18	"listeners": [
21	"ownerId": {	19	{
22	"boundObject": {"@": "owner"},	20	"type": "resizeStart",
23	"boundObjectPropertyPath": "panelBase.panelName",	21	"listener": {"@": "owner"}
24	"oneway": true	22	},
		23	{
		24	"type": "resizeMove",
		25	"listener": {"@": "owner"}
		26	},
		27	{
		28	"type": "resizeEnd",
		29	"listener": {"@": "owner"}
25	}	30	}
26	}	31	]
		32	},
		33
		34	"DragDrop": {
		35	"module": "js/panels/drag-drop-composer",
		36	"name": "DragDropComposer",
		37	"properties": {
		38	"element": {"@": "panelTitle"},
		39	"component": {"@": "owner"}
		40	},
		41	"listeners": [
		42	{
		43	"type": "dragStart",
		44	"listener": {"@": "owner"}
		45	},
		46	{
		47	"type": "dropHover",
		48	"listener": {"@": "owner"}
		49	},
		50	{
		51	"type": "dropped",
		52	"listener": {"@": "owner"}
		53	},
		54	{
		55	"type": "dropEnd",
		56	"listener": {"@": "owner"}
		57	}
		58	]
		59	},
		60
		61	"btnCollapse": {
		62	"module": "montage/ui/toggle-button.reel",
		63	"name": "ToggleButton",
		64	"properties": {
		65	"element": {"#": "btnCollapse"},
		66	"pressedClass": "hide",
		67	"identifier": "btnCollapse"
		68	},
		69	"listeners": [
		70	{
		71	"type": "action",
		72	"listener": {"@": "owner"}
		73	}
		74	]
		75	},
		76
		77	"btnClose": {
		78	"module": "montage/ui/button.reel",
		79	"name": "Button",
		80	"properties": {
		81	"element": {"#": "btnClose"},
		82	"pressedClass": "hide",
		83	"identifier": "btnClose"
		84	},
		85	"listeners": [
		86	{
		87	"type": "action",
		88	"listener": {"@": "owner"}
		89	}
		90	]
27	},	91	},
28		92
29	"slot1": {	93	"slot1": {
@@ -34,14 +98,28 @@
34	}	98	}
35	},	99	},
36		100
		101	"panelTitle": {