2 files changed, 54 insertions, 2 deletions
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
index f5b1851f..3ac0b261 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
@@ -136,6 +136,8 @@
                "properties": {
                    "element": {"#": "inkBottleProperties"},
+                    "_strokeColorCtrl": {"#": "strokeColorCtrl"},
                    "useBorderWidth": {"@": "borderWidthCh"},
                    "borderWidthLabel": {"@": "borderWidthLabel"},
                    "_borderWidth": {"@": "borderWidthHT"},
@@ -154,13 +156,17 @@
                }
            }
        }
-            </script>
+        </script>
        
    </head>
    <body>
        <div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleOptions toolOptionsFloatChildren">
            <div data-montage-id="elementInkOptions" class="toolOptionsFloatChildren">
+                <div class="toolColorChipIcon PencilTool"></div>
+                <div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div>
+                <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
                <input data-montage-id="useBorderWidthCh" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/>
                <label data-montage-id="borderWidthLabel" class="label"> Border:</label>
                <div data-montage-id="borderWidth" class="label"></div>
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
index 6d5c46f6..945df857 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
@@ -8,7 +8,53 @@ var Montage = require("montage/core/core").Montage,
    ShapesController = require("js/controllers/elements/shapes-controller").ShapesController,
    ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
-exports.InkBottleProperties = Montage.create(ToolProperties, {
+var InkBottleProperties = exports.InkBottleProperties = Montage.create(ToolProperties, {
+    addedColorChips: { value: false },
+    _stroke: {
+        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: true,
+        get: function () {
+            return this._stroke;
+        },
+        set: function (value) {
+            if (value !== this._stroke) {
+                this._stroke = value;
+            }
+        }
+    },
+        draw: {
+        enumerable: false,
+        value: function () {
+            Object.getPrototypeOf(InkBottleProperties).draw.call(this);
+            if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
+                // 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._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false);
+                this.addedColorChips = true;
+            }
+            if (this.addedColorChips) {
+                this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
+            }
+        }
+    },
+    handleStrokeColorChange: {
+        value: function (e) {
+            this.stroke = e._event;
+            this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+        }
+    },
    _subPrepare: {
        value: function() {

diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html index f5b1851f..3ac0b261 100755 --- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html +++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
@@ -136,6 +136,8 @@
136	"properties": {	136	"properties": {
137	"element": {"#": "inkBottleProperties"},	137	"element": {"#": "inkBottleProperties"},
138		138
		139	"_strokeColorCtrl": {"#": "strokeColorCtrl"},
		140
139	"useBorderWidth": {"@": "borderWidthCh"},	141	"useBorderWidth": {"@": "borderWidthCh"},
140	"borderWidthLabel": {"@": "borderWidthLabel"},	142	"borderWidthLabel": {"@": "borderWidthLabel"},
141	"_borderWidth": {"@": "borderWidthHT"},	143	"_borderWidth": {"@": "borderWidthHT"},
@@ -154,13 +156,17 @@
154	}	156	}
155	}	157	}
156	}	158	}
157	</script>	159	</script>
158		160
159	</head>	161	</head>
160		162
161	<body>	163	<body>
162	<div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleOptions toolOptionsFloatChildren">	164	<div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleOptions toolOptionsFloatChildren">
163	<div data-montage-id="elementInkOptions" class="toolOptionsFloatChildren">	165	<div data-montage-id="elementInkOptions" class="toolOptionsFloatChildren">
		166	<div class="toolColorChipIcon PencilTool"></div>
		167	<div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div>
		168	<div class="nj-divider divider-vertical toolOptionsSpacer"> </div>
		169
164	<input data-montage-id="useBorderWidthCh" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/>	170	<input data-montage-id="useBorderWidthCh" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/>
165	<label data-montage-id="borderWidthLabel" class="label"> Border:</label>	171	<label data-montage-id="borderWidthLabel" class="label"> Border:</label>
166	<div data-montage-id="borderWidth" class="label"></div>	172	<div data-montage-id="borderWidth" class="label"></div>


diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js index 6d5c46f6..945df857 100755 --- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js +++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
@@ -8,7 +8,53 @@ var Montage = require("montage/core/core").Montage,
8	ShapesController = require("js/controllers/elements/shapes-controller").ShapesController,	8	ShapesController = require("js/controllers/elements/shapes-controller").ShapesController,
9	ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;	9	ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
10		10
11	exports.InkBottleProperties = Montage.create(ToolProperties, {	11	var InkBottleProperties = exports.InkBottleProperties = Montage.create(ToolProperties, {
		12	addedColorChips: { value: false },
		13
		14	_stroke: {
		15	enumerable: false,
		16	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] }
		17	},
		18
		19	stroke: {
		20	enumerable: true,
		21	get: function () {
		22	return this._stroke;
		23	},
		24	set: function (value) {
		25	if (value !== this._stroke) {
		26	this._stroke = value;
		27	}
		28	}
		29	},
		30
		31	draw: {
		32	enumerable: false,
		33	value: function () {
		34	Object.getPrototypeOf(InkBottleProperties).draw.call(this);
		35
		36	if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
		37	// setup stroke color
		38	this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
		39	this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
		40
		41	this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false);
		42
		43	this.addedColorChips = true;
		44	}
		45
		46	if (this.addedColorChips) {
		47	this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
		48	}
		49	}
		50	},
		51
		52	handleStrokeColorChange: {
		53	value: function (e) {
		54	this.stroke = e._event;
		55	this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
		56	}
		57	},
12		58
13	_subPrepare: {	59	_subPrepare: {
14	value: function() {	60	value: function() {