Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(72)

Side by Side Diff: sky/examples/color/color-wheel.sky

Issue 872993006: Sky color chooser example (Closed) Base URL: https://github.com/domokit/mojo.git@master
Patch Set: Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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>
OLDNEW
« sky/examples/color/color-picker.sky ('K') | « sky/examples/color/color-wheel.png ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698