diff options
Diffstat (limited to 'js/components/colorwheel.reel/colorwheel.js')
-rwxr-xr-x | js/components/colorwheel.reel/colorwheel.js | 733 |
1 files changed, 367 insertions, 366 deletions
diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js index a7c70038..6a7856d9 100755 --- a/js/components/colorwheel.reel/colorwheel.js +++ b/js/components/colorwheel.reel/colorwheel.js | |||
@@ -1,24 +1,25 @@ | |||
1 | /* <copyright> | 1 | /* <copyright> |
2 | Copyright (c) 2012, Motorola Mobility, Inc | 2 | Copyright (c) 2012, Motorola Mobility LLC. |
3 | All Rights Reserved. | 3 | All Rights Reserved. |
4 | BSD License. | ||
5 | 4 | ||
6 | Redistribution and use in source and binary forms, with or without | 5 | Redistribution and use in source and binary forms, with or without |
7 | modification, are permitted provided that the following conditions are met: | 6 | modification, are permitted provided that the following conditions are met: |
8 | 7 | ||
9 | - Redistributions of source code must retain the above copyright notice, | 8 | * Redistributions of source code must retain the above copyright notice, |
10 | this list of conditions and the following disclaimer. | 9 | this list of conditions and the following disclaimer. |
11 | - Redistributions in binary form must reproduce the above copyright | 10 | |
12 | notice, this list of conditions and the following disclaimer in the | 11 | * Redistributions in binary form must reproduce the above copyright notice, |
13 | documentation and/or other materials provided with the distribution. | 12 | this list of conditions and the following disclaimer in the documentation |
14 | - Neither the name of Motorola Mobility nor the names of its contributors | 13 | and/or other materials provided with the distribution. |
15 | may be used to endorse or promote products derived from this software | 14 | |
16 | without specific prior written permission. | 15 | * Neither the name of Motorola Mobility LLC nor the names of its |
16 | contributors may be used to endorse or promote products derived from this | ||
17 | software without specific prior written permission. | ||
17 | 18 | ||
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | 21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE |
21 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE | 22 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE |
22 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | 23 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
23 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | 24 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
24 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | 25 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
@@ -30,14 +31,14 @@ POSSIBILITY OF SUCH DAMAGE. | |||
30 | 31 | ||
31 | //////////////////////////////////////////////////////////////////////// | 32 | //////////////////////////////////////////////////////////////////////// |
32 | // | 33 | // |
33 | var Montage = require("montage/core/core").Montage, | 34 | var Montage = require("montage/core/core").Montage, |
34 | Component = require("montage/ui/component").Component; | 35 | Component = require("montage/ui/component").Component; |
35 | //////////////////////////////////////////////////////////////////////// | 36 | //////////////////////////////////////////////////////////////////////// |
36 | // | 37 | // |
37 | exports.ColorWheel = Montage.create(Component, { | 38 | exports.ColorWheel = Montage.create(Component, { |
38 | //////////////////////////////////////////////////////////////////// | 39 | //////////////////////////////////////////////////////////////////// |
39 | // | 40 | // |
40 | hasTemplate: { | 41 | hasTemplate: { |
41 | value: true | 42 | value: true |
42 | }, | 43 | }, |
43 | //////////////////////////////////////////////////////////////////// | 44 | //////////////////////////////////////////////////////////////////// |
@@ -45,7 +46,7 @@ exports.ColorWheel = Montage.create(Component, { | |||
45 | _value: { | 46 | _value: { |
46 | value: {h: 0, s: 0, v: 0} | 47 | value: {h: 0, s: 0, v: 0} |
47 | }, | 48 | }, |
48 | //////////////////////////////////////////////////////////////////// | 49 | //////////////////////////////////////////////////////////////////// |
49 | //Value of wheel in HSV (360, 100, 100) | 50 | //Value of wheel in HSV (360, 100, 100) |
50 | value: { | 51 | value: { |
51 | get: function() { | 52 | get: function() { |
@@ -54,463 +55,463 @@ exports.ColorWheel = Montage.create(Component, { | |||
54 | set: function(value) { | 55 | set: function(value) { |
55 | this._value = value; | 56 | this._value = value; |
56 | if (this._wheelData) { | 57 | if (this._wheelData) { |
57 | if (value && !value.wasSetByCode) { | 58 | if (value && !value.wasSetByCode) { |
58 | this.wheelSelectorAngle(value.h/this._math.TAU*360); | 59 | this.wheelSelectorAngle(value.h/this._math.TAU*360); |
59 | this.drawSwatchColor(value.h/this._math.TAU*360); | 60 | this.drawSwatchColor(value.h/this._math.TAU*360); |
60 | this.drawSwatchSelector(value.s*100, value.v*100); | 61 | this.drawSwatchSelector(value.s*100, value.v*100); |
61 | } | 62 | } |
62 | if (!this._isMouseDown) { | 63 | if (!this._isMouseDown) { |
63 | this._dispatchEvent('change', true); | 64 | this._dispatchEvent('change', true); |
64 | } | 65 | } |
65 | } | 66 | } |
66 | } | 67 | } |
67 | }, | 68 | }, |
68 | //////////////////////////////////////////////////////////////////// | 69 | //////////////////////////////////////////////////////////////////// |
69 | //Stroke size of wheel | 70 | //Stroke size of wheel |
70 | _strokeWidth: { | 71 | _strokeWidth: { |
71 | value: 2 | 72 | value: 2 |
72 | }, | 73 | }, |
73 | //////////////////////////////////////////////////////////////////// | 74 | //////////////////////////////////////////////////////////////////// |
74 | //Size must be set in digits and interpreted as pixel | 75 | //Size must be set in digits and interpreted as pixel |
75 | strokeWidth: { | 76 | strokeWidth: { |
76 | get: function() { | 77 | get: function() { |
77 | return this._strokeWidth; | 78 | return this._strokeWidth; |
78 | }, | 79 | }, |
79 | set: function(value) { | 80 | set: function(value) { |
80 | this._strokeWidth = value; | 81 | this._strokeWidth = value; |
81 | } | 82 | } |
82 | }, | 83 | }, |
83 | //////////////////////////////////////////////////////////////////// | 84 | //////////////////////////////////////////////////////////////////// |
84 | //Stroke color of wheel | 85 | //Stroke color of wheel |
85 | _strokeColor: { | 86 | _strokeColor: { |
86 | value: 'rgb(255, 255, 255)' | 87 | value: 'rgb(255, 255, 255)' |
87 | }, | 88 | }, |
88 | //////////////////////////////////////////////////////////////////// | 89 | //////////////////////////////////////////////////////////////////// |
89 | //Stroke only apply to wheel rim | 90 | //Stroke only apply to wheel rim |
90 | strokeColor: { | 91 | strokeColor: { |
91 | get: function() { | 92 | get: function() { |
92 | return this._strokeColor; | 93 | return this._strokeColor; |
93 | }, | 94 | }, |
94 | set: function(value) { | 95 | set: function(value) { |
95 | this._strokeColor = value; | 96 | this._strokeColor = value; |
96 | } | 97 | } |
97 | }, | 98 | }, |
98 | //////////////////////////////////////////////////////////////////// | 99 | //////////////////////////////////////////////////////////////////// |
99 | //Width of the rim | 100 | //Width of the rim |
100 | _rimWidth: { | 101 | _rimWidth: { |
101 | value: 2 | 102 | value: 2 |
102 | }, | 103 | }, |
103 | //////////////////////////////////////////////////////////////////// | 104 | //////////////////////////////////////////////////////////////////// |
104 | //Width must be set using digits interpreted as pixel | 105 | //Width must be set using digits interpreted as pixel |
105 | rimWidth: { | 106 | rimWidth: { |
106 | get: function() { | 107 | get: function() { |
107 | return this._rimWidth; | 108 | return this._rimWidth; |
108 | }, | 109 | }, |
109 | set: function(value) { | 110 | set: function(value) { |
110 | this._rimWidth = value; | 111 | this._rimWidth = value; |
111 | } | 112 | } |
112 | }, | 113 | }, |
113 | //////////////////////////////////////////////////////////////////// | 114 | //////////////////////////////////////////////////////////////////// |
114 | // | 115 | // |
115 | _math: { | 116 | _math: { |
116 | value: {PI: Math.PI, TAU: Math.PI*2, RADIANS: Math.PI/180} | 117 | value: {PI: Math.PI, TAU: Math.PI*2, RADIANS: Math.PI/180} |
117 | }, | 118 | }, |
118 | //////////////////////////////////////////////////////////////////// | 119 | //////////////////////////////////////////////////////////////////// |
119 | // | 120 | // |
120 | prepareForDraw: { | 121 | prepareForDraw: { |
121 | value: function() { | 122 | value: function() { |
122 | //Hidding component while it is drawn | 123 | //Hidding component while it is drawn |
123 | this.element.style.opacity = 0; | 124 | this.element.style.opacity = 0; |
124 | } | 125 | } |
125 | }, | 126 | }, |
126 | //////////////////////////////////////////////////////////////////// | 127 | //////////////////////////////////////////////////////////////////// |
127 | // | 128 | // |
128 | willDraw: { | 129 | willDraw: { |
129 | value: function() { | 130 | value: function() { |
130 | // | 131 | // |
131 | } | 132 | } |
132 | }, | 133 | }, |
133 | //////////////////////////////////////////////////////////////////// | 134 | //////////////////////////////////////////////////////////////////// |
134 | // | 135 | // |
135 | draw: { | 136 | draw: { |
136 | value: function() { | 137 | value: function() { |
137 | // | 138 | // |
138 | var slice, i, whlctx = this.wheel.getContext("2d"); | 139 | var slice, i, whlctx = this.wheel.getContext("2d"); |
139 | //Determing radius by smallest factor of width or height | 140 | //Determing radius by smallest factor of width or height |
140 | if (this.element.offsetWidth > this.element.offsetHeight) { | 141 | if (this.element.offsetWidth > this.element.offsetHeight) { |
141 | this._math.diameter = this.element.offsetWidth; | 142 | this._math.diameter = this.element.offsetWidth; |
142 | } else { | 143 | } else { |
143 | this._math.diameter = this.element.offsetHeight; | 144 | this._math.diameter = this.element.offsetHeight; |
144 | } | 145 | } |
145 | //Setting the radius from diameter | 146 | //Setting the radius from diameter |
146 | this._math.radius = this._math.diameter/2; | 147 | this._math. |