diff options
author | Eric Guzman | 2012-06-19 01:20:36 -0700 |
---|---|---|
committer | Eric Guzman | 2012-06-19 01:20:36 -0700 |
commit | 2ef72cdf0e59fb3623a2c13251ac707522f3dc5a (patch) | |
tree | f69f4e3de7e4441311ef2b38770e0ce26067aac4 /js/components/colorwheel.reel/colorwheel.js | |
parent | 5260d3dfd99d79924c4aaa3ab798e90c7d328d7d (diff) | |
parent | 1007cbf983ad0f2460a4122a492a96023fdb4439 (diff) | |
download | ninja-2ef72cdf0e59fb3623a2c13251ac707522f3dc5a.tar.gz |
Merge branch 'binding' of github.com:dhg637/ninja-internal into binding
Conflicts:
js/stage/binding-view.reel/binding-view.js
Diffstat (limited to 'js/components/colorwheel.reel/colorwheel.js')
-rwxr-xr-x | js/components/colorwheel.reel/colorwheel.js | 172 |
1 files changed, 70 insertions, 102 deletions
diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js index 343422e2..0980253c 100755 --- a/js/components/colorwheel.reel/colorwheel.js +++ b/js/components/colorwheel.reel/colorwheel.js | |||
@@ -14,19 +14,16 @@ exports.ColorWheel = Montage.create(Component, { | |||
14 | //////////////////////////////////////////////////////////////////// | 14 | //////////////////////////////////////////////////////////////////// |
15 | // | 15 | // |
16 | hasTemplate: { | 16 | hasTemplate: { |
17 | enumerable: false, | ||
18 | value: true | 17 | value: true |
19 | }, | 18 | }, |
20 | //////////////////////////////////////////////////////////////////// | 19 | //////////////////////////////////////////////////////////////////// |
21 | //Value of wheel in HSV (360, 100, 100) | 20 | //Value of wheel in HSV (360, 100, 100) |
22 | _value: { | 21 | _value: { |
23 | enumerable: false, | ||
24 | value: {h: 0, s: 0, v: 0} | 22 | value: {h: 0, s: 0, v: 0} |
25 | }, | 23 | }, |
26 | //////////////////////////////////////////////////////////////////// | 24 | //////////////////////////////////////////////////////////////////// |
27 | //Value of wheel in HSV (360, 100, 100) | 25 | //Value of wheel in HSV (360, 100, 100) |
28 | value: { | 26 | value: { |
29 | enumerable: false, | ||
30 | get: function() { | 27 | get: function() { |
31 | return this._value; | 28 | return this._value; |
32 | }, | 29 | }, |
@@ -34,8 +31,8 @@ exports.ColorWheel = Montage.create(Component, { | |||
34 | this._value = value; | 31 | this._value = value; |
35 | if (this._wheelData) { | 32 | if (this._wheelData) { |
36 | if (value && !value.wasSetByCode) { | 33 | if (value && !value.wasSetByCode) { |
37 | this.wheelSelectorAngle(value.h/this.element._component.math.TAU*360); | 34 | this.wheelSelectorAngle(value.h/this._math.TAU*360); |
38 | this.drawSwatchColor(value.h/this.element._component.math.TAU*360); | 35 | this.drawSwatchColor(value.h/this._math.TAU*360); |
39 | this.drawSwatchSelector(value.s*100, value.v*100); | 36 | this.drawSwatchSelector(value.s*100, value.v*100); |
40 | } | 37 | } |
41 | if (!this._isMouseDown) { | 38 | if (!this._isMouseDown) { |
@@ -47,14 +44,12 @@ exports.ColorWheel = Montage.create(Component, { | |||
47 | //////////////////////////////////////////////////////////////////// | 44 | //////////////////////////////////////////////////////////////////// |
48 | //Stroke size of wheel | 45 | //Stroke size of wheel |
49 | _strokeWidth: { | 46 | _strokeWidth: { |
50 | enumerable: false, | ||
51 | value: 2 | 47 | value: 2 |
52 | }, | 48 | }, |
53 | //////////////////////////////////////////////////////////////////// | 49 | //////////////////////////////////////////////////////////////////// |
54 | //Size must be set in digits and interpreted as pixel | 50 | //Size must be set in digits and interpreted as pixel |
55 | strokeWidth: { | 51 | strokeWidth: { |
56 | enumerable: false, | 52 | get: function() { |
57 | get: function() { | ||
58 | return this._strokeWidth; | 53 | return this._strokeWidth; |
59 | }, | 54 | }, |
60 | set: function(value) { | 55 | set: function(value) { |
@@ -64,14 +59,12 @@ exports.ColorWheel = Montage.create(Component, { | |||
64 | //////////////////////////////////////////////////////////////////// | 59 | //////////////////////////////////////////////////////////////////// |
65 | //Stroke color of wheel | 60 | //Stroke color of wheel |
66 | _strokeColor: { | 61 | _strokeColor: { |
67 | enumerable: false, | ||
68 | value: 'rgb(255, 255, 255)' | 62 | value: 'rgb(255, 255, 255)' |
69 | }, | 63 | }, |
70 | //////////////////////////////////////////////////////////////////// | 64 | //////////////////////////////////////////////////////////////////// |
71 | //Stroke only apply to wheel rim | 65 | //Stroke only apply to wheel rim |
72 | strokeColor: { | 66 | strokeColor: { |
73 | enumerable: false, | 67 | get: function() { |
74 | get: function() { | ||
75 | return this._strokeColor; | 68 | return this._strokeColor; |
76 | }, | 69 | }, |
77 | set: function(value) { | 70 | set: function(value) { |
@@ -81,14 +74,12 @@ exports.ColorWheel = Montage.create(Component, { | |||
81 | //////////////////////////////////////////////////////////////////// | 74 | //////////////////////////////////////////////////////////////////// |
82 | //Width of the rim | 75 | //Width of the rim |
83 | _rimWidth: { | 76 | _rimWidth: { |
84 | enumerable: false, | ||
85 | value: 2 | 77 | value: 2 |
86 | }, | 78 | }, |
87 | //////////////////////////////////////////////////////////////////// | 79 | //////////////////////////////////////////////////////////////////// |
88 | //Width must be set using digits interpreted as pixel | 80 | //Width must be set using digits interpreted as pixel |
89 | rimWidth: { | 81 | rimWidth: { |
90 | enumerable: false, | 82 | get: function() { |
91 | get: function() { | ||
92 | return this._rimWidth; | 83 | return this._rimWidth; |
93 | }, | 84 | }, |
94 | set: function(value) { | 85 | set: function(value) { |
@@ -97,75 +88,57 @@ exports.ColorWheel = Montage.create(Component, { | |||
97 | }, | 88 | }, |
98 | //////////////////////////////////////////////////////////////////// | 89 | //////////////////////////////////////////////////////////////////// |
99 | // | 90 | // |
91 | _math: { | ||
92 | value: {PI: Math.PI, TAU: Math.PI*2, RADIANS: Math.PI/180} | ||
93 | }, | ||
94 | //////////////////////////////////////////////////////////////////// | ||
95 | // | ||
100 | prepareForDraw: { | 96 | prepareForDraw: { |
101 | enumerable: false, | ||
102 | value: function() { | 97 | value: function() { |
103 | // | 98 | //Hidding component while it is drawn |
104 | this.element._component = {wheel: {}, swatch: {}, wheel_select: {}, swatch_select: {}, math: {}}; | 99 | this.element.style.opacity = 0; |
105 | // | ||
106 | this.element._component.math.PI = Math.PI, | ||
107 | this.element._component.math.TAU = Math.PI*2, | ||
108 | this.element._component.math.RADIANS = Math.PI/180; | ||
109 | } | 100 | } |
110 | }, | 101 | }, |
111 | //////////////////////////////////////////////////////////////////// | 102 | //////////////////////////////////////////////////////////////////// |
112 | // | 103 | // |
113 | willDraw: { | 104 | willDraw: { |
114 | enumerable: false, | ||
115 | value: function() { | 105 | value: function() { |
116 | // | 106 | // |
117 | this.element.style.opacity = 0; | ||
118 | // | ||
119 | var cnvs = this.element.getElementsByTagName('canvas'); | ||
120 | // | ||
121 | this.element._component.wheel.canvas = cnvs[0]; | ||
122 | this.element._component.swatch.canvas = cnvs[1]; | ||
123 | this.element._component.wheel_select.canvas = cnvs[3]; | ||
124 | this.element._component.swatch_select.canvas = cnvs[2]; | ||
125 | // | ||
126 | this.element._component.wheel.context = this.element._component.wheel.canvas.getContext("2d"); | ||
127 | this.element._component.swatch.context = this.element._component.swatch.canvas.getContext("2d"); | ||
128 | this.element._component.wheel_select.context = this.element._component.wheel_select.canvas.getContext("2d"); | ||
129 | this.element._component.swatch_select.context = this.element._component.swatch_select.canvas.getContext("2d"); | ||
130 | } | 107 | } |
131 | }, | 108 | }, |
132 | //////////////////////////////////////////////////////////////////// | 109 | //////////////////////////////////////////////////////////////////// |
133 | // | 110 | // |
134 | draw: { | 111 | draw: { |
135 | enumerable: false, | ||
136 | value: function() { | 112 | value: function() { |
137 | // | 113 | // |
138 | var slice, i, whlctx = this.element._component.wheel.context, math = this.element._component.math, | 114 | var slice, i, whlctx = this.wheel.getContext("2d"); |
139 | whlcvs = this.element._component.wheel.canvas, swhcvs = this.element._component.swatch.canvas, | ||
140 | wslcvs = this.element._component.wheel_select.canvas, swscvs = this.element._component.swatch_select.canvas; | ||
141 | //Determing radius by smallest factor of width or height | 115 | //Determing radius by smallest factor of width or height |
142 | if (this.element.offsetWidth > this.element.offsetHeight) { | 116 | if (this.element.offsetWidth > this.element.offsetHeight) { |
143 | math.diameter = this.element.offsetWidth; | 117 | this._math.diameter = this.element.offsetWidth; |
144 | } else { | 118 | } else { |
145 | math.diameter = this.element.offsetHeight; | 119 | this._math.diameter = this.element.offsetHeight; |
146 | } | 120 | } |
147 | //Setting the radius from diameter | 121 | //Setting the radius from diameter |
148 | math.radius = math.diameter/2; | 122 | this._math.radius = this._math.diameter/2; |
149 | //Inner radius of wheel | 123 | //Inner radius of wheel |
150 | math.innerRadius = math.radius - this.rimWidth; | 124 | this._math.innerRadius = this._math.radius - this.rimWidth; |
151 | //Setting the widths and heights to match the container's | 125 | //Setting the widths and heights to match the container's |
152 | whlcvs.width = whlcvs.height = wslcvs.width = wslcvs.height = swscvs.width = swscvs.height = math.diameter; | 126 | this.wheel.width = this.wheel.height = this.wheelSelect.width = this.wheelSelect.height = this.swatchSelect.width = this.swatchSelect.height = this._math.diameter; |
153 | // | 127 | // |
154 | math.swatchLength = Math.floor((math.radius - this.rimWidth - this.strokeWidth*4) * Math.sin(45 * math.RADIANS) * 2); | 128 | this._math.swatchLength = Math.floor((this._math.radius - this.rimWidth - this.strokeWidth*4) * Math.sin(45 * this._math.RADIANS) * 2); |
155 | math.swatchPosition = Math.round(math.radius - (math.swatchLength/2))+this.strokeWidth* Math.sin(45 * math.RADIANS); | 129 | this._math.swatchPosition = Math.round(this._math.radius - (this._math.swatchLength/2))+this.strokeWidth* Math.sin(45 * this._math.RADIANS); |
156 | // | 130 | // |
157 | //swhcvs.width = swhcvs.height = math.swatchLength; //TODO: Figure out why this breaks on WINDOWS ONLY | 131 | this.swatch.style.top = this.swatch.style.left = this._math.swatchPosition+'px'; |
158 | swhcvs.style.top = swhcvs.style.left = math.swatchPosition+'px'; | ||
159 | //Clearing wheel for redraw | 132 | //Clearing wheel for redraw |
160 | whlctx.clearRect(0, 0, math.diameter, math.diameter); | 133 | whlctx.clearRect(0, 0, this._math.diameter, this._math.diameter); |
161 | //////////////////////////////////////////////////////////////// | 134 | //////////////////////////////////////////////////////////////// |
162 | //Drawing color wheel circle | 135 | //Drawing color wheel circle |
163 | whlctx.save(); | 136 | whlctx.save(); |
164 | whlctx.beginPath(); | 137 | whlctx.beginPath(); |
165 | whlctx.moveTo(0,0); | 138 | whlctx.moveTo(0,0); |
166 | whlctx.lineTo(math.diameter,0); | 139 | whlctx.lineTo(this._math.diameter,0); |
167 | whlctx.lineTo(math.diameter,math.diameter); | 140 | whlctx.lineTo(this._math.diamete |