aboutsummaryrefslogtreecommitdiff
path: root/js/components/colorwheel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/colorwheel.reel')
-rwxr-xr-xjs/components/colorwheel.reel/colorwheel.html60
-rwxr-xr-xjs/components/colorwheel.reel/colorwheel.js710
-rwxr-xr-xjs/components/colorwheel.reel/css/colorwheel.scss6
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//
33var Montage = require("montage/core/core").Montage, 33var Montage = require("montage/core/core").Montage,
34 Component = require("montage/ui/component").Component; 34 Component = require("montage/ui/component").Component;
35//////////////////////////////////////////////////////////////////////// 35////////////////////////////////////////////////////////////////////////
36// 36//
37exports.ColorWheel = Montage.create(Component, { 37exports.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 //