OLD | NEW |
---|---|
(Empty) | |
1 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" /> | |
abarth-chromium
2015/01/31 03:20:18
Please add a copyright block.
hansmuller1
2015/02/02 16:32:30
Done.
| |
2 | |
3 <sky-element name="color-wheel" | |
4 attributes="color:string" | |
5 on-pointerdown="handlePointerDown" | |
6 on-pointermove="handlePointerMove" | |
7 on-pointerup="handlePointerUp"> | |
abarth-chromium
2015/01/31 03:20:18
You should listen for on-pointercancel as well. Y
hansmuller1
2015/02/02 16:32:30
Done.
| |
8 <template> | |
9 <style> | |
10 color-picker { | |
11 margin: 20px; | |
12 } | |
abarth-chromium
2015/01/31 03:20:18
This style doesn't appear to apply to anything.
abarth-chromium
2015/01/31 03:20:18
This style doesn't appear to apply to anything.
hansmuller1
2015/02/02 16:32:30
Oops. Removed that.
| |
13 .color-wheel-img { | |
abarth-chromium
2015/01/31 03:20:18
There's no need for this class. You can just use
hansmuller1
2015/02/02 16:32:30
Done.
| |
14 min-width: 100%; | |
15 height: auto; | |
16 } | |
17 </style> | |
18 <img class="color-wheel-img" src="color-wheel.png"> | |
19 </template> | |
20 <script> | |
21 function toHexString(n) { | |
22 var s = Number(n).toString(16).toUpperCase(); | |
23 return (s.length == 1) ? "0" + s : s; | |
24 } | |
25 | |
26 class Color { | |
27 constructor(r, g, b) { | |
28 this.r = r; | |
29 this.g = g; | |
30 this.b = b; | |
esprehn
2015/02/01 12:28:43
Object.preventExtensions(this)
hansmuller1
2015/02/02 16:32:30
I got rid of this class, since it ended up with th
| |
31 } | |
32 toString() { | |
33 return "#" + toHexString(this.r) + toHexString(this.g) + toHexString(this.b) ; | |
34 } | |
35 } | |
36 | |
37 function HSVtoRGB(h, s, v) { | |
esprehn
2015/02/01 12:28:43
hsvToRgb()
Treat acronyms like words.
hansmuller1
2015/02/02 16:32:30
Done.
| |
38 var i = Math.floor(h * 6); | |
39 var f = h * 6 - i; | |
40 var p = v * (1 - s); | |
41 var q = v * (1 - f * s); | |
42 var t = v * (1 - (1 - f) * s); | |
43 var r, g, b; | |
44 switch (i % 6) { | |
45 case 0: r = v, g = t, b = p; break; | |
46 case 1: r = q, g = v, b = p; break; | |
47 case 2: r = p, g = v, b = t; break; | |
48 case 3: r = p, g = q, b = v; break; | |
49 case 4: r = t, g = p, b = v; break; | |
50 case 5: r = v, g = p, b = q; break; | |
esprehn
2015/02/01 12:28:43
All these single letter vars are pretty hard to re
hansmuller1
2015/02/02 16:32:30
I removed the re-declaration of r,g,b (and oops).
| |
51 } | |
52 var r = Math.floor(r * 255); | |
53 var g = Math.floor(g * 255); | |
54 var b = Math.floor(b * 255); | |
55 return new Color(r, g, b); | |
56 } | |
57 | |
58 class ColorWheel { | |
esprehn
2015/02/01 12:28:43
This should just be a function, it has no state.
hansmuller1
2015/02/02 16:32:30
Done.
| |
59 xyToRGB(x, y, radius) { | |
60 var rx = x - radius; | |
61 var ry = y - radius; | |
62 var d = radius * radius; | |
63 if (rx * rx + ry * ry > d) | |
64 return undefined; | |
65 var h = (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI); | |
66 var s = Math.sqrt(d) / radius; | |
67 return HSVtoRGB(h, s, 1); | |
68 } | |
69 } | |
70 | |
71 module.exports = class extends SkyElement { | |
72 created() { | |
73 super.created(); | |
74 this.pointerIsDown = false; | |
75 this.colorWheel = new ColorWheel; | |
76 this.color = "#xFF00FF"; | |
77 } | |
78 updateColor(event) { | |
79 var bounds = event.target.getBoundingClientRect(); | |
80 var x = event.x - bounds.left; | |
81 var y = event.y - bounds.top; | |
82 var r = Math.min(bounds.width, bounds.height) / 2.0; | |
83 var rgb = this.colorWheel.xyToRGB(x, y, r); | |
84 if (rgb) | |
85 this.color = rgb.toString(); | |
86 } | |
87 handlePointerDown(event) { | |
88 this.pointerIsDown = true; | |
89 this.updateColor(event); | |
90 } | |
91 handlePointerMove(event) { | |
92 if (this.pointerIsDown) | |
abarth-chromium
2015/01/31 03:20:18
You'll never get a pointermove event unless the po
hansmuller1
2015/02/02 16:32:30
Done.
| |
93 this.updateColor(event); | |
94 } | |
95 handlePointerUp(event) { | |
96 this.pointerIsDown = false; | |
97 } | |
98 }.register(); | |
99 </script> | |
100 </sky-element> | |
OLD | NEW |