diff options
Diffstat (limited to 'js/components/colorwheel.reel')
-rwxr-xr-x | js/components/colorwheel.reel/colorwheel.html | 60 | ||||
-rwxr-xr-x | js/components/colorwheel.reel/colorwheel.js | 710 | ||||
-rwxr-xr-x | js/components/colorwheel.reel/css/colorwheel.scss | 6 |
3 files changed, 388 insertions, 388 deletions
diff --git a/js/components/colorwheel.reel/colorwheel.html b/js/components/colorwheel.reel/colorwheel.html index b39479a8..4f542f88 100755 --- a/js/components/colorwheel.reel/colorwheel.html +++ b/js/components/colorwheel.reel/colorwheel.html | |||
@@ -31,39 +31,39 @@ POSSIBILITY OF SUCH DAMAGE. | |||
31 | </copyright> | 31 | </copyright> |
32 | --> | 32 | --> |
33 | <html lang="en"> | 33 | <html lang="en"> |
34 | <head> | 34 | <head> |
35 | 35 | ||
36 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | 36 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
37 | 37 | ||
38 | <link rel="stylesheet" type="text/css" href="css/colorwheel.css"> | 38 | <link rel="stylesheet" type="text/css" href="css/colorwheel.css"> |
39 | 39 | ||
40 | <script type="text/montage-serialization"> | 40 | <script type="text/montage-serialization"> |
41 | { | 41 | { |
42 | "owner": { | 42 | "owner": { |
43 | "prototype": "js/components/colorwheel.reel[ColorWheel]", | 43 | "prototype": "js/components/colorwheel.reel[ColorWheel]", |
44 | "properties": { | 44 | "properties": { |
45 | "element": {"#": "colorwheel"}, | 45 | "element": {"#": "colorwheel"}, |
46 | "wheel": {"#": "wheel"}, | 46 | "wheel": {"#": "wheel"}, |
47 | "wheelSelect": {"#": "wselect"}, | 47 | "wheelSelect": {"#": "wselect"}, |
48 | "swatch": {"#": "swatch"}, | 48 | "swatch": {"#": "swatch"}, |
49 | "swatchSelect": {"#": "sselect"} | 49 | "swatchSelect": {"#": "sselect"} |
50 | 50 | ||
51 | } | 51 | } |
52 | } | 52 | } |
53 | } | 53 | } |
54 | </script> | 54 | </script> |
55 | 55 | ||
56 | </head> | 56 | </head> |
57 | |||
58 | <body> | ||
59 | 57 | ||
60 | <div data-montage-id="colorwheel" class="colorwheel"> | 58 | <body> |
61 | <canvas data-montage-id="wheel"></canvas> | ||
62 | <canvas data-montage-id="swatch"></canvas> | ||
63 | <canvas data-montage-id="sselect"></canvas> | ||
64 | <canvas data-montage-id="wselect"></canvas> | ||
65 | </div> | ||
66 | 59 | ||
67 | </body> | 60 | <div data-montage-id="colorwheel" class="colorwheel"> |
61 | <canvas data-montage-id="wheel"></canvas> | ||
62 | <canvas data-montage-id="swatch"></canvas> | ||
63 | <canvas data-montage-id="sselect"></canvas> | ||
64 | <canvas data-montage-id="wselect"></canvas> | ||
65 | </div> | ||
66 | |||
67 | </body> | ||
68 | 68 | ||
69 | </html> | 69 | </html> |
diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js index a7c70038..97a1751d 100755 --- a/js/components/colorwheel.reel/colorwheel.js +++ b/js/components/colorwheel.reel/colorwheel.js | |||
@@ -30,14 +30,14 @@ 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 | // | 36 | // |
37 | exports.ColorWheel = Montage.create(Component, { | 37 | exports.ColorWheel = Montage.create(Component, { |
38 | //////////////////////////////////////////////////////////////////// | 38 | //////////////////////////////////////////////////////////////////// |
39 | // | 39 | // |
40 | hasTemplate: { | 40 | hasTemplate: { |
41 | value: true | 41 | value: true |
42 | }, | 42 | }, |
43 | //////////////////////////////////////////////////////////////////// | 43 | //////////////////////////////////////////////////////////////////// |
@@ -45,7 +45,7 @@ exports.ColorWheel = Montage.create(Component, { | |||
45 | _value: { | 45 | _value: { |
46 | value: {h: 0, s: 0, v: 0} | 46 | value: {h: 0, s: 0, v: 0} |
47 | }, | 47 | }, |
48 | //////////////////////////////////////////////////////////////////// | 48 | //////////////////////////////////////////////////////////////////// |
49 | //Value of wheel in HSV (360, 100, 100) | 49 | //Value of wheel in HSV (360, 100, 100) |
50 | value: { | 50 | value: { |
51 | get: function() { | 51 | get: function() { |
@@ -54,463 +54,463 @@ exports.ColorWheel = Montage.create(Component, { | |||
54 | set: function(value) { | 54 | set: function(value) { |
55 | this._value = value; | 55 | this._value = value; |
56 | if (this._wheelData) { | 56 | if (this._wheelData) { |
57 | if (value && !value.wasSetByCode) { | 57 | if (value && !value.wasSetByCode) { |
58 | this.wheelSelectorAngle(value.h/this._math.TAU*360); | 58 | this.wheelSelectorAngle(value.h/this._math.TAU*360); |
59 | this.drawSwatchColor(value.h/this._math.TAU*360); | 59 | this.drawSwatchColor(value.h/this._math.TAU*360); |
60 | this.drawSwatchSelector(value.s*100, value.v*100); | 60 | this.drawSwatchSelector(value.s*100, value.v*100); |
61 | } | 61 | } |
62 | if (!this._isMouseDown) { | 62 | if (!this._isMouseDown) { |
63 | this._dispatchEvent('change', true); | 63 | this._dispatchEvent('change', true); |
64 | } | 64 | } |
65 | } | 65 | } |
66 | } | 66 | } |
67 | }, | 67 | }, |
68 | //////////////////////////////////////////////////////////////////// | 68 | //////////////////////////////////////////////////////////////////// |
69 | //Stroke size of wheel | 69 | //Stroke size of wheel |
70 | _strokeWidth: { | 70 | _strokeWidth: { |
71 | value: 2 | 71 | value: 2 |
72 | }, | 72 | }, |
73 | //////////////////////////////////////////////////////////////////// | 73 | //////////////////////////////////////////////////////////////////// |
74 | //Size must be set in digits and interpreted as pixel | 74 | //Size must be set in digits and interpreted as pixel |
75 | strokeWidth: { | 75 | strokeWidth: { |
76 | get: function() { | 76 | get: function() { |
77 | return this._strokeWidth; | 77 | return this._strokeWidth; |
78 | }, | 78 | }, |
79 | set: function(value) { | 79 | set: function(value) { |
80 | this._strokeWidth = value; | 80 | this._strokeWidth = value; |
81 | } | 81 | } |
82 | }, | 82 | }, |
83 | //////////////////////////////////////////////////////////////////// | 83 | //////////////////////////////////////////////////////////////////// |
84 | //Stroke color of wheel | 84 | //Stroke color of wheel |
85 | _strokeColor: { | 85 | _strokeColor: { |
86 | value: 'rgb(255, 255, 255)' | 86 | value: 'rgb(255, 255, 255)' |
87 | }, | 87 | }, |
88 | //////////////////////////////////////////////////////////////////// | 88 | //////////////////////////////////////////////////////////////////// |
89 | //Stroke only apply to wheel rim | 89 | //Stroke only apply to wheel rim |
90 | strokeColor: { | 90 | strokeColor: { |
91 | get: function() { | 91 | get: function() { |
92 | return this._strokeColor; | 92 | return this._strokeColor; |
93 | }, | 93 | }, |
94 | set: function(value) { | 94 | set: function(value) { |
95 | this._strokeColor = value; | 95 | this._strokeColor = value; |
96 | } | 96 | } |
97 | }, | 97 | }, |
98 | //////////////////////////////////////////////////////////////////// | 98 | //////////////////////////////////////////////////////////////////// |
99 | //Width of the rim | 99 | //Width of the rim |
100 | _rimWidth: { | 100 | _rimWidth: { |
101 | value: 2 | 101 | value: 2 |
102 | }, | 102 | }, |
103 | //////////////////////////////////////////////////////////////////// | 103 | //////////////////////////////////////////////////////////////////// |
104 | //Width must be set using digits interpreted as pixel | 104 | //Width must be set using digits interpreted as pixel |
105 | rimWidth: { | 105 | rimWidth: { |
106 | get: function() { | 106 | get: function() { |
107 | return this._rimWidth; | 107 | return this._rimWidth; |
108 | }, | 108 | }, |
109 | set: function(value) { | 109 | set: function(value) { |
110 | this._rimWidth = value; | 110 | this._rimWidth = value; |
111 | } | 111 | } |
112 | }, | 112 | }, |
113 | //////////////////////////////////////////////////////////////////// | 113 | //////////////////////////////////////////////////////////////////// |
114 | // | 114 | // |
115 | _math: { | 115 | _math: { |
116 | value: {PI: Math.PI, TAU: Math.PI*2, RADIANS: Math.PI/180} | 116 | value: {PI: Math.PI, TAU: Math.PI*2, RADIANS: Math.PI/180} |
117 | }, | 117 | }, |
118 | //////////////////////////////////////////////////////////////////// | 118 | //////////////////////////////////////////////////////////////////// |
119 | // | 119 | // |
120 | prepareForDraw: { | 120 | prepareForDraw: { |
121 | value: function() { | 121 | value: function() { |
122 | //Hidding component while it is drawn | 122 | //Hidding component while it is drawn |
123 | this.element.style.opacity = 0; | 123 | this.element.style.opacity = 0; |
124 | } | 124 | } |
125 | }, | 125 | }, |
126 | //////////////////////////////////////////////////////////////////// | 126 | //////////////////////////////////////////////////////////////////// |
127 | // | 127 | // |
128 | willDraw: { | 128 | willDraw: { |
129 | value: function() { | 129 | value: function() { |
130 | // | 130 | // |
131 |