sky/examples/color/color-wheel.sky

<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-->
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />

<sky-element name="color-wheel"
    attributes="color:string"
    on-pointerdown="handlePointerDown">
<template>
  <style>
    img {
      min-width: 100%;
      height: auto;
    }
  </style>
  <img class="color-wheel-img" src="color-wheel.png">
</template>
<script>
function hsvToRgb(h, s, v) {
  var i = Math.floor(h * 6);
  var f = h * 6 - i;
  var p = v * (1 - s);
  var q = v * (1 - f * s);
  var t = v * (1 - (1 - f) * s);
  var r, g, b;
  switch (i % 6) {
    case 0: r = v, g = t, b = p; break;
    case 1: r = q, g = v, b = p; break;
    case 2: r = p, g = v, b = t; break;
    case 3: r = p, g = q, b = v; break;
    case 4: r = t, g = p, b = v; break;
    case 5: r = v, g = p, b = q; break;
  }
  return {
      r: Math.floor(r * 255), 
      g: Math.floor(g * 255), 
      b: Math.floor(b * 255)
  };
}

function xyToRgb(x, y, radius) {
  var rx = x - radius;
  var ry = y - radius;
  var d = radius * radius;
  if (rx * rx + ry * ry > d)
    return undefined;
  var h = (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI);
  var s = Math.sqrt(d) / radius;
  return hsvToRgb(h, s, 1);
}

function toHexString(n) {
  var s = Number(n).toString(16).toUpperCase();
  return (s.length == 1) ? "0" + s : s;
}

function rgbToString(rgb) {
  return "#" + toHexString(rgb.r) + toHexString(rgb.g) + toHexString(rgb.b);
}

module.exports = class extends SkyElement {
  created() {
    super.created();
    this.color = "#xFF00FF";
    this.colorChanged = function() {
      this.dispatchEvent(new CustomEvent('color-change', {
        bubbles: true,
        detail: this.color,
      }));
    };
  }
  updateColor(event) {
    var bounds = event.target.getBoundingClientRect();
    var x = event.x - bounds.left;
    var y = event.y - bounds.top;
    var radius = Math.min(bounds.width, bounds.height) / 2.0;
    var rgb = xyToRgb(x, y, radius);
    if (rgb)
      this.color = rgbToString(rgb);
  }
  handlePointerDown(event) {
    this.updateColor(event);
  }
}.register();
</script>
</sky-element>