2 files changed, 100 insertions, 6 deletions
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..e720eb84 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.html
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -28,21 +28,36 @@
                "prototype": "js/components/tools-properties/pen-properties.reel",
                "properties": {
                    "element": {"#": "penProperties"},
+                    "_penToolRadio": {"#": "penTool"},
+                    "_penPlusRadio": {"#": "penPlus"},
+                    "_penMinusRadio": {"#": "penMinus"},
+                    "_fillColorCtrl": {"#": "fillColorCtrl"},
+                    "_strokeColorCtrl": {"#": "strokeColorCtrl"},
                    "_strokeSize": {"@": "strokeSizeHT"}
                }
            }
        }
-            </script>
+        </script>
       
    </head>
    <body>
-    <div data-montage-id="penProperties" class="subToolHolderPanel">
+    <div data-montage-id="penProperties" class="subToolHolderPanel toolOptionsFloatChildren optionsPenTool">
-        <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
+        <input type="radio" data-montage-id="penTool" class="toolOptsRadioButton penToolIcon" title="Pen Tool" name="penSubtoolRadios" value="pen" checked/>
+        <input type="radio" data-montage-id="penPlus" class="toolOptsRadioButton penPlusToolIcon" title="Pen Plus" name="penSubtoolRadios" value="penPlus"/>
+        <input type="radio" data-montage-id="penMinus" class="toolOptsRadioButton penMinusToolIcon toolOptionsSpacer" title="Pen Minus" name="penSubtoolRadios" value="penMinus"/>
+        <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
+        <div class="toolColorChipIcon PencilTool"></div>
+        <div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div>
+        <div class="toolColorChipIcon FillTool"></div>
+        <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></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.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html index 68ab85f6..e720eb84 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.html +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -28,21 +28,36 @@
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
		32	"_penToolRadio": {"#": "penTool"},
		33	"_penPlusRadio": {"#": "penPlus"},
		34	"_penMinusRadio": {"#": "penMinus"},
		35
		36	"_fillColorCtrl": {"#": "fillColorCtrl"},
		37	"_strokeColorCtrl": {"#": "strokeColorCtrl"},
31	"_strokeSize": {"@": "strokeSizeHT"}	38	"_strokeSize": {"@": "strokeSizeHT"}
32	}	39	}
33	}	40	}
34	}	41	}
35	</script>	42	</script>
36		43
37	</head>	44	</head>
38		45
39	<body>	46	<body>
40	<div data-montage-id="penProperties" class="subToolHolderPanel">	47	<div data-montage-id="penProperties" class="subToolHolderPanel toolOptionsFloatChildren optionsPenTool">
41	<div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">	48	<input type="radio" data-montage-id="penTool" class="toolOptsRadioButton penToolIcon" title="Pen Tool" name="penSubtoolRadios" value="pen" checked/>
		49	<input type="radio" data-montage-id="penPlus" class="toolOptsRadioButton penPlusToolIcon" title="Pen Plus" name="penSubtoolRadios" value="penPlus"/>
		50	<input type="radio" data-montage-id="penMinus" class="toolOptsRadioButton penMinusToolIcon toolOptionsSpacer" title="Pen Minus" name="penSubtoolRadios" value="penMinus"/>
		51	<div class="nj-divider divider-vertical toolOptionsSpacer"> </div>
		52
		53	<div class="toolColorChipIcon PencilTool"></div>
		54	<div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div>
		55	<div class="toolColorChipIcon FillTool"></div>
		56	<div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
		57	<div class="nj-divider divider-vertical"> </div>
42	<label class="label"> Stroke:</label>	58	<label class="label"> Stroke:</label>
43	<div data-montage-id="strokeSize" class="label"></div>	59	<div data-montage-id="strokeSize" class="label"></div>
44	</div>	60	</div>
45	</div>
46	</body>	61	</body>
47		62
48	</html> \ No newline at end of file	63	</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