diff options
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/tools-properties | |
parent | d32cf39a8ef1e2d2fb50f1183c5546fdac83b396 (diff) | |
download | ninja-ba64dfa1d64969e290f15459a826171468fe3550.tar.gz |
put color chips in the inkbottle and fill tool
Diffstat (limited to 'js/components/tools-properties')
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 @@ | |||
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; | ||