3 files changed, 111 insertions, 5 deletions
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.css b/js/components/tools-properties/pen-properties.reel/pen-properties.css
index 7f1b0f7f..d08d0abd 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.css
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.css
@@ -4,3 +4,25 @@
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
+ .optionsPenTool {
+    padding: 6px;
+}
+ .optionsPenTool > * {
+    float:left;
+}
+ .optionsPenTool .fillColorCtrl,  .optionsPenTool .strokeColorCtrl {
+    width: 20px;
+    height: 18px;
+    margin-left: 3px;    
+    margin-right: 8px;    
+    border: 1px black solid;
+}
+ .optionsPenTool .colorCtrlIcon {
+    width: 20px;
+    height: 20px;
+    -webkit-transform: scale(0.8);
+    background-color: rgb(40, 40, 40);
+}
+\ No newline at end of file
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html
index 68ab85f6..446b0a02 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.html
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -28,6 +28,8 @@
                "prototype": "js/components/tools-properties/pen-properties.reel",
                "properties": {
                    "element": {"#": "penProperties"},
+                    "_fillColorCtrl": {"#": "fillColorCtrl"},
+                    "_strokeColorCtrl": {"#": "strokeColorCtrl"},
                    "_strokeSize": {"@": "strokeSizeHT"}
                }
            }
@@ -37,12 +39,15 @@
    </head>
    <body>
-    <div data-montage-id="penProperties" class="subToolHolderPanel">
+    <div data-montage-id="penProperties" class="subToolHolderPanel optionsPenTool">
-        <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
+        <div class="colorCtrlIcon PencilTool"></div>
+        <div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
+        <div class="colorCtrlIcon FillTool"></div>
+        <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
+        <div class="nj-divider divider-vertical">&nbsp;</div>
            <label class="label"> Stroke:</label>
            <div data-montage-id="strokeSize" class="label"></div>
        </div>
-    </div>
    </body>
 </html>
 \ No newline at end of file
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.js b/js/components/tools-properties/pen-properties.reel/pen-properties.js
index b57f9a6f..cd205e07 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.js
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js
@@ -7,8 +7,87 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = require("montage/core/core").Montage;
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
-exports.PenProperties = Montage.create(ToolProperties, {
+var PenProperties = exports.PenProperties = Montage.create(ToolProperties, {
+    addedColorChips: { value: false },
+    _fill: {
+        enumerable: false,
+        value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] }
+    },
+    _stroke: {
+        enumerable: false,
+        value: { colorMode: 'rgb', color: { r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [0, 0, 0, 1] }
+    },
+    stroke: {
+        enumerable: true,
+        get: function () {
+            return this._stroke;
+        },
+        set: function (value) {
+            if (value !== this._stroke) {
+                this._stroke = value;
+            }
+        }
+    },
+    fill: {
+        enumerable: true,
+        get: function () {
+            return this._fill;
+        },
+        set: function (value) {
+            if (value !== this._fill) {
+                this._fill = value;
+            }
+        }
+    },
    strokeSize: {
-        get: function() { return this._strokeSize; }
+        get: function () {
+            return this._strokeSize; 
+        }
+    },
+    draw: {
+        enumerable: false,
+        value: function () {
+            Object.getPrototypeOf(PenProperties).draw.call(this);
+            if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
+                // setup fill color
+                this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+                this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
+                // setup stroke color
+                this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+                this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
+                this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
+                this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false);
+                this.addedColorChips = true;
+            }
+            if (this.addedColorChips) {
+                this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
+                this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
+            }
+        }
+    },
+    handleFillColorChange: {
+        value: function (e) {
+            this.fill = e._event;
+            this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+        }
+    },
+    handleStrokeColorChange: {
+        value: function (e) {
+            this.stroke = e._event;
+            this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+        }
    }
 });
 \ No newline at end of file

diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.css b/js/components/tools-properties/pen-properties.reel/pen-properties.css index 7f1b0f7f..d08d0abd 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.css +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.css
@@ -4,3 +4,25 @@
4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5	</copyright> */	5	</copyright> */
6		6
		7	.optionsPenTool {
		8	padding: 6px;
		9	}
		10
		11	.optionsPenTool > * {
		12	float:left;
		13	}
		14
		15	.optionsPenTool .fillColorCtrl, .optionsPenTool .strokeColorCtrl {
		16	width: 20px;
		17	height: 18px;
		18	margin-left: 3px;
		19	margin-right: 8px;
		20	border: 1px black solid;
		21	}
		22
		23	.optionsPenTool .colorCtrlIcon {
		24	width: 20px;
		25	height: 20px;
		26	-webkit-transform: scale(0.8);
		27	background-color: rgb(40, 40, 40);
		28	} \ No newline at end of file


diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html index 68ab85f6..446b0a02 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.html +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -28,6 +28,8 @@
28	"prototype": "js/components/tools-properties/pen-properties.reel",	28	"prototype": "js/components/tools-properties/pen-properties.reel",
29	"properties": {	29	"properties": {
30	"element": {"#": "penProperties"},	30	"element": {"#": "penProperties"},
		31	"_fillColorCtrl": {"#": "fillColorCtrl"},
		32	"_strokeColorCtrl": {"#": "strokeColorCtrl"},
31	"_strokeSize": {"@": "strokeSizeHT"}	33	"_strokeSize": {"@": "strokeSizeHT"}
32	}	34	}
33	}	35	}
@@ -37,12 +39,15 @@
37	</head>	39	</head>
38		40
39	<body>	41	<body>
40	<div data-montage-id="penProperties" class="subToolHolderPanel">	42	<div data-montage-id="penProperties" class="subToolHolderPanel optionsPenTool">
41	<div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">	43	<div class="colorCtrlIcon PencilTool"></div>
		44	<div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
		45	<div class="colorCtrlIcon FillTool"></div>
		46	<div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div>
		47	<div class="nj-divider divider-vertical"> </div>
42	<label class="label"> Stroke:</label>	48	<label class="label"> Stroke:</label>
43	<div data-montage-id="strokeSize" class="label"></div>	49	<div data-montage-id="strokeSize" class="label"></div>
44	</div>	50	</div>
45	</div>
46	</body>	51	</body>
47		52
48	</html> \ No newline at end of file	53	</html> \ No newline at end of file


diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.js b/js/components/tools-properties/pen-properties.reel/pen-properties.js index b57f9a6f..cd205e07 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.js +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js
@@ -7,8 +7,87 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
7	var Montage = require("montage/core/core").Montage;	7	var Montage = require("montage/core/core").Montage;
8	var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;	8	var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
9		9
10	exports.PenProperties = Montage.create(ToolProperties, {	10	var PenProperties = exports.PenProperties = Montage.create(ToolProperties, {
		11	addedColorChips: { value: false },
		12
		13	_fill: {
		14	enumerable: false,
		15	value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] }
		16	},
		17
		18	_stroke: {
		19	enumerable: false,
		20	value: { colorMode: 'rgb', color: { r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [0, 0, 0, 1] }
		21	},
		22
		23	stroke: {
		24	enumerable: true,
		25	get: function () {
		26	return this._stroke;
		27	},
		28	set: function (value) {
		29	if (value !== this._stroke) {
		30	this._stroke = value;
		31	}
		32	}
		33	},
		34
		35	fill: {
		36	enumerable: true,
		37	get: function () {
		38	return this._fill;
		39	},
		40	set: function (value) {
		41	if (value !== this._fill) {
		42	this._fill = value;
		43	}
		44	}
		45	},
		46
11	strokeSize: {	47	strokeSize: {
12	get: function() { return this._strokeSize; }	48	get: function () {
		49	return this._strokeSize;
		50	}
		51	},
		52
		53	draw: {
		54	enumerable: false,
		55	value: function () {
		56	Object.getPrototypeOf(PenProperties).draw.call(this);
		57
		58	if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
		59	// setup fill color
		60	this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
		61	this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
		62
		63	// setup stroke color
		64	this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
		65	this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
		66
		67	this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
		68	this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false);
		69
		70	this.addedColorChips = true;
		71	}
		72
		73	if (this.addedColorChips) {
		74	this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
		75	this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
		76	}
		77	}
		78	},
		79
		80	handleFillColorChange: {
		81	value: function (e) {
		82	this.fill = e._event;
		83	this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
		84	}
		85	},
		86
		87	handleStrokeColorChange: {
		88	value: function (e) {
		89	this.stroke = e._event;
		90	this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
		91	}
13	}	92	}
14	}); \ No newline at end of file	93	}); \ No newline at end of file