aboutsummaryrefslogtreecommitdiff
path: root/js/components/tools-properties/shape-properties.reel/shape-properties.js
diff options
context:
space:
mode:
authorJonathan Duran2012-05-22 10:32:03 -0700
committerJonathan Duran2012-05-22 10:32:03 -0700
commit7b76e4664b35f044e9f24c060f1e092cb5e5c4b0 (patch)
treef0f6168b083aa929d34f37edca6c87ce7c3743bd /js/components/tools-properties/shape-properties.reel/shape-properties.js
parent0dc43f8b6d7db6d9ed698e8c4568e942d8e3d8eb (diff)
parentc37a876b373ddc7cb19277aaeaa6bb2d2d5a50ac (diff)
downloadninja-7b76e4664b35f044e9f24c060f1e092cb5e5c4b0.tar.gz
Merge branch 'refs/heads/NINJAmaster' into TimelineUber
Diffstat (limited to 'js/components/tools-properties/shape-properties.reel/shape-properties.js')
-rwxr-xr-xjs/components/tools-properties/shape-properties.reel/shape-properties.js126
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
11exports.ShapeProperties = Montage.create(ToolProperties, { 11var 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;