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.html14
-rwxr-xr-xjs/components/colorwheel.reel/colorwheel.js172
2 files changed, 79 insertions, 107 deletions
diff --git a/js/components/colorwheel.reel/colorwheel.html b/js/components/colorwheel.reel/colorwheel.html
index 707bd637..5af6dff8 100755
--- a/js/components/colorwheel.reel/colorwheel.html
+++ b/js/components/colorwheel.reel/colorwheel.html
@@ -18,7 +18,11 @@
18 "owner": { 18 "owner": {
19 "prototype": "js/components/colorwheel.reel[ColorWheel]", 19 "prototype": "js/components/colorwheel.reel[ColorWheel]",
20 "properties": { 20 "properties": {
21 "element": {"#": "colorwheel"} 21 "element": {"#": "colorwheel"},
22 "wheel": {"#": "wheel"},
23 "wheelSelect": {"#": "wselect"},
24 "swatch": {"#": "swatch"},
25 "swatchSelect": {"#": "sselect"}
22 26
23 } 27 }
24 } 28 }
@@ -30,10 +34,10 @@
30 <body> 34 <body>
31 35
32 <div data-montage-id="colorwheel" class="colorwheel"> 36 <div data-montage-id="colorwheel" class="colorwheel">
33 <canvas></canvas> 37 <canvas data-montage-id="wheel"></canvas>
34 <canvas></canvas> 38 <canvas data-montage-id="swatch"></canvas>
35 <canvas></canvas> 39 <canvas data-montage-id="sselect"></canvas>
36 <canvas></canvas> 40 <canvas data-montage-id="wselect"></canvas>
37 </div> 41 </div>
38 42
39 </body> 43 </body>
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