put color chips in the inkbottle and fill tool

author: John Mayhew 2012-05-10 15:10:58 -0700
committer: John Mayhew 2012-05-10 15:10:58 -0700
commit: ba64dfa1d64969e290f15459a826171468fe3550 (patch)
tree: 10b26bbfde954d4069b58e866d1105047a2ec72e /js/components
parent: d32cf39a8ef1e2d2fb50f1183c5546fdac83b396 (diff)
download: ninja-ba64dfa1d64969e290f15459a826171468fe3550.tar.gz
4 files changed, 110 insertions, 6 deletions
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html
index 975b4e6f..734966dc 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -23,18 +23,25 @@
                "prototype": "js/components/tools-properties/fill-properties.reel",
                "properties": {
                    "element": {"#": "fillProperties"},
+                    "_fillColorCtrl": {"#": "fillColorCtrl"},
                    "_useWebGL": {"#": "useWebGLCH"},
                    "_materialsContainer": {"#": "materialsContainer"},
                    "_fillMaterial": {"@": "_fillMaterialCB"}
                }
            }
        }
-            </script>
+        </script>
    </head>
    <body>
        <div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool toolOptionsFloatChildren">
+            <div class="toolColorChipIcon FillTool"></div>
+            <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
+            <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
            <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
            <label class="label">Use WebGL</label>
            <div data-montage-id="materialsContainer" class="materialsContainerOptions toolOptionsFloatChildren">
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.js b/js/components/tools-properties/fill-properties.reel/fill-properties.js
index 61b667d7..ae136956 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.js
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.js
@@ -8,10 +8,55 @@ 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.FillProperties = Montage.create(ToolProperties, {
+var FillProperties = exports.FillProperties = Montage.create(ToolProperties, {
+    _use3D: { value: false },
+    addedColorChips: { value: false },
+    _fill: {
+        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] }
+    },
+    fill: {
+        enumerable: true,
+        get: function () {
+            return this._fill;
+        },
+        set: function (value) {
+            if (value !== this._fill) {
+                this._fill = value;
+            }
+        }
+    },
+    draw: {
+        enumerable: false,
+        value: function () {
+            Object.getPrototypeOf(FillProperties).draw.call(this);
+            if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
+                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);
+                this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
+                this.addedColorChips = true;
+            }
+            if (this.addedColorChips) {
+                this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
+            }
+        }
+    },
+    handleFillColorChange: {
+        value: function (e) {
+            this.fill = e._event;
+            this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+        }
+    },
-    _use3D:    { value: false },
-    
    _subPrepare: {
        value: function() {
            Object.defineBinding(this._fillMaterial, "items", {
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;
author	John Mayhew	2012-05-10 15:10:58 -0700
committer	John Mayhew	2012-05-10 15:10:58 -0700
commit	ba64dfa1d64969e290f15459a826171468fe3550 (patch)
tree	10b26bbfde954d4069b58e866d1105047a2ec72e /js/components
parent	d32cf39a8ef1e2d2fb50f1183c5546fdac83b396 (diff)
download	ninja-ba64dfa1d64969e290f15459a826171468fe3550.tar.gz

diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html index 975b4e6f..734966dc 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -23,18 +23,25 @@
23	"prototype": "js/components/tools-properties/fill-properties.reel",	23	"prototype": "js/components/tools-properties/fill-properties.reel",
24	"properties": {	24	"properties": {
25	"element": {"#": "fillProperties"},	25	"element": {"#": "fillProperties"},
		26
		27	"_fillColorCtrl": {"#": "fillColorCtrl"},
		28
26	"_useWebGL": {"#": "useWebGLCH"},	29	"_useWebGL": {"#": "useWebGLCH"},
27	"_materialsContainer": {"#": "materialsContainer"},	30	"_materialsContainer": {"#": "materialsContainer"},
28	"_fillMaterial": {"@": "_fillMaterialCB"}	31	"_fillMaterial": {"@": "_fillMaterialCB"}
29	}	32	}
30	}	33	}
31	}	34	}
32	</script>	35	</script>
33		36
34	</head>	37	</head>
35		38
36	<body>	39	<body>
37	<div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool toolOptionsFloatChildren">	40	<div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool toolOptionsFloatChildren">
		41	<div class="toolColorChipIcon FillTool"></div>
		42	<div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
		43	<div class="nj-divider divider-vertical toolOptionsSpacer"> </div>
		44
38	<input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>	45	<input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
39	<label class="label">Use WebGL</label>	46	<label class="label">Use WebGL</label>
40	<div data-montage-id="materialsContainer" class="materialsContainerOptions toolOptionsFloatChildren">	47	<div data-montage-id="materialsContainer" class="materialsContainerOptions toolOptionsFloatChildren">


diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.js b/js/components/tools-properties/fill-properties.reel/fill-properties.js index 61b667d7..ae136956 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.js +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.js
@@ -8,10 +8,55 @@ 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.FillProperties = Montage.create(ToolProperties, {	11	var FillProperties = exports.FillProperties = Montage.create(ToolProperties, {
		12
		13	_use3D: { value: false },
		14	addedColorChips: { value: false },
		15
		16	_fill: {
		17	enumerable: false,
		18	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] }
		19	},
		20
		21	fill: {
		22	enumerable: true,
		23	get: function () {
		24	return this._fill;
		25	},
		26	set: function (value) {
		27	if (value !== this._fill) {
		28	this._fill = value;
		29	}
		30	}
		31	},
		32
		33	draw: {
		34	enumerable: false,
		35	value: function () {
		36	Object.getPrototypeOf(FillProperties).draw.call(this);
		37
		38	if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
		39	this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
		40	this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
		41
		42	this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
		43
		44	this.addedColorChips = true;
		45	}
		46
		47	if (this.addedColorChips) {
		48	this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
		49	}
		50	}
		51	},
		52
		53	handleFillColorChange: {
		54	value: function (e) {
		55	this.fill = e._event;
		56	this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
		57	}
		58	},
12		59
13	_use3D: { value: false },
14
15	_subPrepare: {	60	_subPrepare: {
16	value: function() {	61	value: function() {
17	Object.defineBinding(this._fillMaterial, "items", {	62	Object.defineBinding(this._fillMaterial, "items", {


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;