diff options
author | Jon Reid | 2012-05-22 10:40:40 -0700 |
---|---|---|
committer | Jon Reid | 2012-05-22 10:40:40 -0700 |
commit | d43a3179171a9f82c7a17425ec69ff0a4d571f10 (patch) | |
tree | 1c78ccc588f04bac9bff4de82e527a128162cf4f /js/components/tools-properties/shape-properties.reel/shape-properties.js | |
parent | 1324301feea23f9d66c9ca2f52e004b552e9ed96 (diff) | |
parent | 0b6dfbbc7f6c0a67bd415ee8d64685b3f209edfa (diff) | |
download | ninja-d43a3179171a9f82c7a17425ec69ff0a4d571f10.tar.gz |
Merge remote-tracking branch 'ninja-jduran/TimelineUber' into timeline-local
Diffstat (limited to 'js/components/tools-properties/shape-properties.reel/shape-properties.js')
-rwxr-xr-x | js/components/tools-properties/shape-properties.reel/shape-properties.js | 126 |
1 files changed, 105 insertions, 21 deletions
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js index 79567453..bd0cf8cf 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.js +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js | |||
@@ -8,12 +8,74 @@ 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.ShapeProperties = Montage.create(ToolProperties, { | 11 | var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, { |
12 | toolsData: { value: null }, | 12 | toolsData: { value: null }, |
13 | _use3D: { value: false }, | 13 | _use3D: { value: false }, |
14 | addedColorChips: { value: false }, | ||
15 | |||
16 | _fill: { | ||
17 | enumerable: false, | ||
18 | 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] } | ||
19 | }, | ||
20 | |||
21 | _stroke: { | ||
22 | enumerable: false, | ||
23 | 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] } | ||
24 | }, | ||
25 | |||
26 | stroke: { | ||
27 | enumerable: true, | ||
28 | get: function () { | ||
29 | return this._stroke; | ||
30 | }, | ||
31 | set: function (value) { | ||
32 | if (value !== this._stroke) { | ||
33 | this._stroke = value; | ||
34 | } | ||
35 | } | ||
36 | }, | ||
37 | |||
38 | fill: { | ||
39 | enumerable: true, | ||
40 | get: function () { | ||
41 | return this._fill; | ||
42 | }, | ||
43 | set: function (value) { | ||
44 | if (value !== this._fill) { | ||
45 | this._fill = value; | ||
46 | } | ||
47 | } | ||
48 | }, | ||
49 | |||
50 | draw: { | ||
51 | enumerable: false, | ||
52 | value: function () { | ||
53 | Object.getPrototypeOf(ShapeProperties).draw.call(this); | ||
54 | |||
55 | if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { | ||
56 | // setup fill color | ||
57 | this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
58 | this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); | ||
59 | |||
60 | // setup stroke color | ||
61 | this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
62 | this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl); | ||
63 | |||
64 | this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); | ||
65 | this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false); | ||
66 | |||
67 | this.addedColorChips = true; | ||
68 | } | ||
69 | |||
70 | if (this.addedColorChips) { | ||
71 | this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); | ||
72 | this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); | ||
73 | } | ||
74 | } | ||
75 | }, | ||
14 | 76 | ||
15 | _subPrepare: { | 77 | _subPrepare: { |
16 | value: function() { | 78 | value: function () { |
17 | this.rectProperties.visible = true; | 79 | this.rectProperties.visible = true; |
18 | 80 | ||
19 | Object.defineBinding(this._strokeMaterial, "items", { | 81 | Object.defineBinding(this._strokeMaterial, "items", { |
@@ -33,21 +95,34 @@ exports.ShapeProperties = Montage.create(ToolProperties, { | |||
33 | } | 95 | } |
34 | }, | 96 | }, |
35 | 97 | ||
36 | _selectedSubTool: { value: null, enumerable: false}, | 98 | _selectedSubTool: { value: null, enumerable: false }, |
37 | 99 | ||
38 | selectedSubTool : { | 100 | selectedSubTool: { |
39 | get: function() { return this._selectedSubTool;}, | 101 | get: function () { return this._selectedSubTool; }, |
40 | set: function(value) { | 102 | set: function (value) { |
41 | if(value) { | 103 | if (value) { |
42 | 104 | ||
43 | this._selectedSubTool? this[this._selectedSubTool.properties].visible = false : this.rectProperties.visible = false; | 105 | this._selectedSubTool ? this[this._selectedSubTool.properties].visible = false : this.rectProperties.visible = false; |
44 | 106 | ||
45 | this._selectedSubTool = value; | 107 | this._selectedSubTool = value; |
46 | this[this._selectedSubTool.properties].visible = true; | 108 | this[this._selectedSubTool.properties].visible = true; |
47 | 109 | ||
48 | if(this._useWebGL.checked) | 110 | if (this._selectedSubTool.id === "LineTool") { |
49 | { | 111 | this._fillColorCtrl.style["display"] = "none"; |
50 | if(this._selectedSubTool.id === "LineTool") { | 112 | this._fillColorCtrl.visible = false; |
113 | this._fillColorCtrlIcon.style["display"] = "none"; | ||
114 | this._fillColorCtrlIcon.visible = false; | ||
115 | this.endDivider.style["display"] = "none"; | ||
116 | } else { | ||
117 | this._fillColorCtrl.style["display"] = ""; | ||
118 | this._fillColorCtrl.visible = true; | ||
119 | this._fillColorCtrlIcon.style["display"] = ""; | ||
120 | this._fillColorCtrlIcon.visible = true; | ||
121 | this.endDivider.style["display"] = ""; | ||
122 | } | ||
123 | |||
124 | if (this._useWebGL.checked) { | ||
125 | if (this._selectedSubTool.id === "LineTool") { | ||
51 | this._fillIcon.style["display"] = "none"; | 126 | this._fillIcon.style["display"] = "none"; |
52 | this._fillMaterial.visible = false; | 127 | this._fillMaterial.visible = false; |
53 | } else { | 128 | } else { |
@@ -55,27 +130,23 @@ exports.ShapeProperties = Montage.create(ToolProperties, { | |||
55 | this._fillMaterial.visible = true; | 130 | this._fillMaterial.visible = true; |
56 | } | 131 | } |
57 | } | 132 | } |
58 | |||
59 | } | 133 | } |
60 | } | 134 | } |
61 | }, | 135 | }, |
62 | 136 | ||
63 | handleChange: { | 137 | handleChange: { |
64 | value: function(event) { | 138 | value: function (event) { |
65 | if(this._useWebGL.checked) | 139 | if (this._useWebGL.checked) { |
66 | { | ||
67 | this._use3D = true; | 140 | this._use3D = true; |
68 | this._materialLabel.style["display"] = ""; | 141 | this._materialLabel.style["display"] = ""; |
69 | this._strokeIcon.style["display"] = ""; | 142 | this._strokeIcon.style["display"] = ""; |
70 | this._strokeMaterial.visible = true; | 143 | this._strokeMaterial.visible = true; |
71 | if(this.selectedSubTool.id !== "LineTool") | 144 | if (this.selectedSubTool.id !== "LineTool") { |
72 | { | ||
73 | this._fillIcon.style["display"] = ""; | 145 | this._fillIcon.style["display"] = ""; |
74 | this._fillMaterial.visible = true; | 146 | this._fillMaterial.visible = true; |
75 | } | 147 | } |
76 | } | 148 | } |
77 | else | 149 | else { |
78 | { | ||
79 | this._use3D = false; | 150 | this._use3D = false; |
80 | this._materialLabel.style["display"] = "none"; | 151 | this._materialLabel.style["display"] = "none"; |
81 | this._strokeIcon.style["display"] = "none"; | 152 | this._strokeIcon.style["display"] = "none"; |
@@ -84,6 +155,19 @@ exports.ShapeProperties = Montage.create(ToolProperties, { | |||
84 | this._fillMaterial.visible = false; | 155 | this._fillMaterial.visible = false; |
85 | } | 156 | } |
86 | } | 157 | } |
87 | } | 158 | }, |
88 | 159 | ||
160 | handleFillColorChange: { | ||
161 | value: function (e) { | ||
162 | this.fill = e._event; | ||
163 | this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); | ||
164 | } | ||
165 | }, | ||
166 | |||
167 | handleStrokeColorChange: { | ||
168 | value: function (e) { | ||
169 | this.stroke = e._event; | ||
170 | this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); | ||
171 |