diff options
author | Kris Kowal | 2012-07-06 11:52:06 -0700 |
---|---|---|
committer | Kris Kowal | 2012-07-06 15:01:48 -0700 |
commit | 648ee61ae84216d0236e0dbc211addc13b2cfa3a (patch) | |
tree | 8f0f55557bd0c47a84e49c1977c950645d284607 /js/components/colorbar.reel/colorbar.js | |
parent | aedd14b18695d031f695d27dfbd94df5614495bb (diff) | |
download | ninja-648ee61ae84216d0236e0dbc211addc13b2cfa3a.tar.gz |
Expand tabs
Diffstat (limited to 'js/components/colorbar.reel/colorbar.js')
-rwxr-xr-x | js/components/colorbar.reel/colorbar.js | 236 |
1 files changed, 118 insertions, 118 deletions
diff --git a/js/components/colorbar.reel/colorbar.js b/js/components/colorbar.reel/colorbar.js index 4f3577d9..808ada4e 100755 --- a/js/components/colorbar.reel/colorbar.js +++ b/js/components/colorbar.reel/colorbar.js | |||
@@ -30,152 +30,152 @@ POSSIBILITY OF SUCH DAMAGE. | |||
30 | 30 | ||
31 | //////////////////////////////////////////////////////////////////////// | 31 | //////////////////////////////////////////////////////////////////////// |
32 | // | 32 | // |
33 | var Montage = require("montage/core/core").Montage, | 33 | var Montage = require("montage/core/core").Montage, |
34 | Component = require("montage/ui/component").Component; | 34 | Component = require("montage/ui/component").Component; |
35 | //////////////////////////////////////////////////////////////////////// | 35 | //////////////////////////////////////////////////////////////////////// |
36 | //Exporting as ColorBar | 36 | //Exporting as ColorBar |
37 | exports.ColorBar = Montage.create(Component, { | 37 | exports.ColorBar = Montage.create(Component, { |
38 | //////////////////////////////////////////////////////////////////// | 38 | //////////////////////////////////////////////////////////////////// |
39 | //No reel needed since it's just a bar component | 39 | //No reel needed since it's just a bar component |
40 | hasTemplate: { | 40 | hasTemplate: { |
41 | value: true | 41 | value: true |
42 | }, | 42 | }, |
43 | //////////////////////////////////////////////////////////////////// | 43 | //////////////////////////////////////////////////////////////////// |
44 | //Width of spectrum (not including b/w buttons) | 44 | //Width of spectrum (not including b/w buttons) |
45 | _colorBarSpectrumWidth: { | 45 | _colorBarSpectrumWidth: { |
46 | value: null | 46 | value: null |
47 | }, | 47 | }, |
48 | //////////////////////////////////////////////////////////////////// | 48 | //////////////////////////////////////////////////////////////////// |
49 | //Width of spectrum steps (used to calculate size of B/W buttons) | 49 | //Width of spectrum steps (used to calculate size of B/W buttons) |
50 | _colorBarSpectrumWidthSteps: { | 50 | _colorBarSpectrumWidthSteps: { |
51 | value: 10 | 51 | value: 10 |
52 | }, | 52 | }, |
53 | //////////////////////////////////////////////////////////////////// | 53 | //////////////////////////////////////////////////////////////////// |
54 | //Default value | 54 | //Default value |
55 | _value: { | 55 | _value: { |
56 | value: {h: 0, s: 0, v: 0} | 56 | value: {h: 0, s: 0, v: 0} |
57 | }, | 57 | }, |
58 | //////////////////////////////////////////////////////////////////// | 58 | //////////////////////////////////////////////////////////////////// |
59 | //HSV Value selected from bar | 59 | //HSV Value selected from bar |
60 | value: { | 60 | value: { |
61 | get: function() {return this._value;}, | 61 | get: function() {return this._value;}, |
62 | set: function(value) { | 62 | set: function(value) { |
63 | if (value) { | 63 | if (value) { |
64 | //Checking for limits (Max and Min HSV values) | 64 | //Checking for limits (Max and Min HSV values) |
65 | if (value.h > Math.PI*2) { | 65 | if (value.h > Math.PI*2) { |
66 | value.h = Math.PI*2; | 66 | value.h = Math.PI*2; |
67 | } else if (value.h < 0) { | 67 | } else if (value.h < 0) { |
68 | value.h = 0; | 68 | value.h = 0; |
69 | } | 69 | } |
70 | // | 70 | // |
71 | if (value.s > 1) { | 71 | if (value.s > 1) { |
72 | value.s = 1; | 72 | value.s = 1; |
73 | } else if (value.s < 0) { | 73 | } else if (value.s < 0) { |
74 | value.s = 0; | 74 | value.s = 0; |
75 | } | 75 | } |
76 | // | 76 | // |
77 | if (value.v > 1) { | 77 | if (value.v > 1) { |
78 | value.v = 1; | 78 | value.v = 1; |
79 | } else if (value.v < 0) { | 79 | } else if (value.v < 0) { |
80 | value.v = 0; | 80 | value.v = 0; |
81 | } | 81 | } |
82 | //Setting value | 82 | //Setting value |
83 | this._value = value; | 83 | this._value = value; |
84 | // | 84 | // |
85 | if (!this._isMouseDown) { | 85 | if (!this._isMouseDown) { |
86 | this._dispatchActionEvent('change', true); | 86 | this._dispatchActionEvent('change', true); |
87 | } | 87 | } |
88 | } | 88 | } |
89 | } | 89 | } |
90 | }, | 90 | }, |
91 | //////////////////////////////////////////////////////////////////// | 91 | //////////////////////////////////////////////////////////////////// |
92 | // | 92 | // |
93 | prepareForDraw: { | 93 | prepareForDraw: { |
94 | value: function() { | 94 | value: function() { |
95 | //Nothing | 95 | //Nothing |
96 | } | 96 | } |
97 | }, | 97 | }, |
98 | //////////////////////////////////////////////////////////////////// | 98 | //////////////////////////////////////////////////////////////////// |
99 | //Setting up and drawing canvas to object | 99 | //Setting up and drawing canvas to object |
100 | willDraw: { | 100 | willDraw: { |
101 | value: function() { | 101 | value: function() { |
102 | //Setting the width and height of the canvas to match container | 102 | //Setting the width and height of the canvas to match container |
103 | this.element.width = parseInt(window.getComputedStyle(this.element, null).width); | 103 | this.element.width = parseInt(window.getComputedStyle(this.element, null).width); |
104 | this.element.height = parseInt(window.getComputedStyle(this.element, null).height); | 104 | this.element.height = parseInt(window.getComputedStyle(this.element, null).height); |
105 | } | 105 | } |
106 | }, | 106 | }, |
107 | //////////////////////////////////////////////////////////////////// | 107 | //////////////////////////////////////////////////////////////////// |
108 | // | 108 | // |
109 | draw: { | 109 | draw: { |
110 | value: function () { | 110 | value: function () { |
111 | //Local variables | 111 | //Local variables |
112 | var cb_canvas = this.element, cb_ctx, cb_grdnt, cb_slc, cb_gwidth, PI = Math.PI, i; | 112 | var cb_canvas = this.element, cb_ctx, cb_grdnt, cb_slc, cb_gwidth, PI = Math.PI, i; |
113 | //calculating width of spectrum (remainder is used for B/W buttons) | 113 | //calculating width of spectrum (remainder is used for B/W buttons) |
114 | cb_gwidth = Math.round(cb_canvas.width - cb_canvas.width/this._colorBarSpectrumWidthSteps); | 114 | cb_gwidth = Math.round(cb_canvas.width - cb_canvas.width/this._colorBarSpectrumWidthSteps); |
115 | //Context and Gradient | 115 | //Context and Gradient |
116 | cb_ctx = cb_canvas.getContext('2d'); | 116 | cb_ctx = cb_canvas.getContext('2d'); |
117 | cb_grdnt = cb_ctx.createLinearGradient(0, cb_canvas.height, cb_gwidth, cb_canvas.height); | 117 | cb_grdnt = cb_ctx.createLinearGradient(0, cb_canvas.height, cb_gwidth, cb_canvas.height); |
118 | //////////////////////////////////////////////////////// | 118 | //////////////////////////////////////////////////////// |
119 | //Looping through set intervals (Creating spectrum) | 119 | //Looping through set intervals (Creating spectrum) |
120 | for (i=0; i<60; i++) { | 120 | for (i=0; i<60; i++) { |
121 | //Calculating slice number | 121 | //Calculating slice number |
122 | cb_slc = Math.round(255*i/60); | 122 | cb_slc = Math.round(255*i/60); |
123 | //Creating gradient slices (6 colors in color theory) | 123 | //Creating gradient slices (6 colors in color theory) |
124 | cb_grdnt.addColorStop(i/360, 'rgb(255, '+cb_slc+', 0)'); | 124 | cb_grdnt.addColorStop(i/360, 'rgb(255, '+cb_slc+', 0)'); |
125 | cb_grdnt.addColorStop((i+60)/360, 'rgb('+(255-cb_slc)+', 255, 0)'); | 125 | cb_grdnt.addColorStop((i+60)/360, 'rgb('+(255-cb_slc)+', 255, 0)'); |
126 | cb_grdnt.addColorStop((i+120)/360, 'rgb(0, 255, '+cb_slc+')'); | 126 | cb_grdnt.addColorStop((i+120)/360, 'rgb(0, 255, '+cb_slc+')'); |
127 | cb_grdnt.addColorStop((i+180)/360, 'rgb(0, '+(255-cb_slc)+', 255)'); | 127 | cb_grdnt.addColorStop((i+180)/360, 'rgb(0, '+(255-cb_slc)+', 255)'); |
128 | cb_grdnt.addColorStop((i+240)/360, 'rgb('+cb_slc+', 0, 255)'); | 128 | cb_grdnt.addColorStop((i+240)/360, 'rgb('+cb_slc+', 0, 255)'); |
129 | cb_grdnt.addColorStop((i+300)/360, 'rgb(255, 0,'+(255-cb_slc)+')'); | 129 | cb_grdnt.addColorStop((i+300)/360, 'rgb(255, 0,'+(255-cb_slc)+')'); |
130 | } | 130 | } |
131 | //Adding Color Bar to the canvas (Gradients) | 131 | //Adding Color Bar to the canvas (Gradients) |
132 | cb_ctx.fillStyle = cb_grdnt; | 132 | cb_ctx.fillStyle = cb_grdnt; |
133 | cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); | 133 | cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); |
134 | //////////////////////////////////////////////////////// | 134 | //////////////////////////////////////////////////////// |
135 | //White Gradient overlay to simulate L | 135 | //White Gradient overlay to simulate L |
136 | cb_grdnt = cb_ctx.createLinearGradient(0, 0, 0, cb_canvas.height); | 136 | cb_grdnt = cb_ctx.createLinearGradient(0, 0, 0, cb_canvas.height); |
137 | cb_grdnt.addColorStop(0.0, 'rgba(255, 255, 255, 1)'); | 137 | cb_grdnt.addColorStop(0.0, 'rgba(255, 255, 255, 1)'); |
138 | cb_grdnt.addColorStop(0.5, 'rgba(255, 255, 255, 0)'); | 138 | cb_grdnt.addColorStop(0.5, 'rgba(255, 255, 255, 0)'); |
139 | cb_ctx.fillStyle = cb_grdnt; | 139 | cb_ctx.fillStyle = cb_grdnt; |
140 | cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); | 140 | cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); |
141 | //Black Gradient overlay to simulate S | 141 | //Black Gradient overlay to simulate S |
142 | cb_grdnt = cb_ctx.createLinearGradient(0,0,0,cb_canvas.height); | 142 | cb_grdnt = cb_ctx.createLinearGradient(0,0,0,cb_canvas.height); |
143 | cb_grdnt.addColorStop(0.5, 'rgba(0, 0, 0, 0)'); | 143 | cb_grdnt.addColorStop(0.5, 'rgba(0, 0, 0, 0)'); |
144 | cb_grdnt.addColorStop(1.0, 'rgba(0, 0, 0, 1)'); | 144 | cb_grdnt.addColorStop(1.0, 'rgba(0, 0, 0, 1)'); |
145 | cb_ctx.fillStyle = cb_grdnt; | 145 | cb_ctx.fillStyle = cb_grdnt; |
146 | cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); | 146 | cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); |
147 | //Black "button" | 147 | //Black "button" |
148 | cb_ctx.fillStyle = "#000"; | 148 | cb_ctx.fillStyle = "#000"; |
149 | cb_ctx.fillRect(cb_gwidth, cb_canvas.height/2, cb_gwidth, cb_canvas.height/2); | 149 | cb_ctx.fillRect(cb_gwidth, cb_canvas.height/2, cb_gwidth, cb_canvas.height/2); |
150 | //Black line divider | 150 | //Black line divider |
151 | cb_ctx.fillStyle = "#000"; | 151 | cb_ctx.fillStyle = "#000"; |
152 | cb_ctx.fillRect(cb_gwidth-1, 0, cb_gwidth+1, cb_canvas.height); | 152 | cb_ctx.fillRect(cb_gwidth-1, 0, cb_gwidth+1, cb_canvas.height); |
153 | //White "button" | 153 | //White "button" |
154 | cb_ctx.fillStyle = "#FFF"; | 154 | cb_ctx.fillStyle = "#FFF"; |
155 | cb_ctx.fillRect(cb_gwidth, 0, cb_gwidth, cb_canvas.height/2); | 155 | cb_ctx.fillRect(cb_gwidth, 0, cb_gwidth, cb_canvas.height/2); |
156 | //Saving | 156 | //Saving |
157 | cb_ctx.restore(); | 157 | cb_ctx.restore(); |
158 | cb_ctx.save(); |