Source/WebInspectorUI/UserInterface/Views/ColorWheel.js - WebKit - Git at Google

 /*
  * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
  *    documentation and/or other materials provided with the distribution.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
  * THE POSSIBILITY OF SUCH DAMAGE.
  */

 WI.ColorWheel = class ColorWheel extends WI.Object
 {
     constructor()
     {
         super();

         this._rawCanvas = document.createElement("canvas");
         this._tintedCanvas = document.createElement("canvas");
         this._finalCanvas = document.createElement("canvas");

         this._crosshair = document.createElement("div");
         this._crosshair.className = "crosshair";

         this._element = document.createElement("div");
         this._element.className = "color-wheel";

         this._element.appendChild(this._finalCanvas);
         this._element.appendChild(this._crosshair);

         this._finalCanvas.addEventListener("mousedown", this);
     }

     // Public

     set dimension(dimension)
     {
         this._element.style.width = this.element.style.height = `${dimension}px`;

         this._finalCanvas.width = this._tintedCanvas.width = this._rawCanvas.width = dimension * window.devicePixelRatio;
         this._finalCanvas.height = this._tintedCanvas.height = this._rawCanvas.height = dimension * window.devicePixelRatio;

         this._finalCanvas.style.width = this._finalCanvas.style.height = dimension + "px";

         this._dimension = dimension;
         // We shrink the radius a bit for better anti-aliasing.
         this._radius = dimension / 2 - 2;

         this._setCrosshairPosition(new WI.Point(dimension / 2, dimension / 2));

         this._drawRawCanvas();
         this._draw();
     }

     get element()
     {
         return this._element;
     }

     get brightness()
     {
         return this._brightness;
     }

     set brightness(brightness)
     {
         this._brightness = brightness;
         this._draw();
     }

     get tintedColor()
     {
         if (this._crosshairPosition)
             return this._colorAtPointWithBrightness(this._crosshairPosition.x * window.devicePixelRatio, this._crosshairPosition.y * window.devicePixelRatio, this._brightness);

         return new WI.Color(WI.Color.Format.RGBA, [0, 0, 0, 0]);
     }

     set tintedColor(tintedColor)
     {
         var data = this._tintedColorToPointAndBrightness(tintedColor);
         this._setCrosshairPosition(data.point);
         this.brightness = data.brightness;
     }

     get rawColor()
     {
         if (this._crosshairPosition)
             return this._colorAtPointWithBrightness(this._crosshairPosition.x * window.devicePixelRatio, this._crosshairPosition.y * window.devicePixelRatio, 1);

         return new WI.Color(WI.Color.Format.RGBA, [0, 0, 0, 0]);
     }

     // Protected

     handleEvent(event)
     {
         switch (event.type) {
         case "mousedown":
             this._handleMousedown(event);
             break;
         case "mousemove":
             this._handleMousemove(event);
             break;
         case "mouseup":
             this._handleMouseup(event);
             break;
         }
     }

     // Private

     _handleMousedown(event)
     {
         window.addEventListener("mousemove", this, true);
         window.addEventListener("mouseup", this, true);

         this._updateColorForMouseEvent(event);
     }

     _handleMousemove(event)
     {
         this._updateColorForMouseEvent(event);
     }

     _handleMouseup(event)
     {
         window.removeEventListener("mousemove", this, true);
         window.removeEventListener("mouseup", this, true);
     }

     _pointInCircleForEvent(event)
     {
         function distance(a, b)
         {
             return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
         }

         function angleFromCenterToPoint(center, point)
         {
             return Math.atan2(point.y - center.y, point.x - center.x);
         }

         function pointOnCircumference(c, r, a)
         {
             return new WI.Point(c.x + r * Math.cos(a), c.y + r * Math.sin(a));
         }

         var dimension = this._dimension;
         var point = window.webkitConvertPointFromPageToNode(this._finalCanvas, new WebKitPoint(event.pageX, event.pageY));
         var center = new WI.Point(dimension / 2, dimension / 2);
         if (distance(point, center) > this._radius) {
             var angle = angleFromCenterToPoint(center, point);
             point = pointOnCircumference(center, this._radius, angle);
         }
         return point;
     }

     _updateColorForMouseEvent(event)
     {
         var point = this._pointInCircleForEvent(event);

         this._setCrosshairPosition(point);

         if (this.delegate && typeof this.delegate.colorWheelColorDidChange === "function")
             this.delegate.colorWheelColorDidChange(this);
     }

     _setCrosshairPosition(point)
     {
         this._crosshairPosition = point;
         this._crosshair.style.webkitTransform = "translate(" + Math.round(point.x) + "px, " + Math.round(point.y) + "px)";
     }

     _tintedColorToPointAndBrightness(color)
     {
         var rgb = color.rgb;
         var hsv = WI.Color.rgb2hsv(rgb[0], rgb[1], rgb[2]);
         var cosHue = Math.cos(hsv[0] * Math.PI / 180);
         var sinHue = Math.sin(hsv[0] * Math.PI / 180);
         var center = this._dimension / 2;
         var x = center + (center * cosHue * hsv[1]);
         var y = center - (center * sinHue * hsv[1]);
         return {
             point: new WI.Point(x, y),
             brightness: hsv[2]
         };
     }

     _drawRawCanvas() {
         var ctx = this._rawCanvas.getContext("2d");

         var dimension = this._dimension * window.devicePixelRatio;

         ctx.fillStyle = "white";
         ctx.fillRect(0, 0, dimension, dimension);

         var imageData = ctx.getImageData(0, 0, dimension, dimension);
         var data = imageData.data;
         for (var j = 0; j < dimension; ++j) {
             for (var i = 0; i < dimension; ++i) {
                 var color = this._colorAtPointWithBrightness(i, j, 1);
                 if (!color)
                     continue;
                 var pos = (j * dimension + i) * 4;
                 data[pos] = color.rgb[0];
                 data[pos + 1] = color.rgb[1];
                 data[pos + 2] = color.rgb[2];
             }
         }
         ctx.putImageData(imageData, 0, 0);
     }

     _colorAtPointWithBrightness(x, y, brightness)
     {
         var center = this._dimension / 2 * window.devicePixelRatio;
         var xDis = x - center;
         var yDis = y - center;
         var distance = Math.sqrt(xDis * xDis + yDis * yDis);

         if (distance - center > 0.001)
             return new WI.Color(WI.Color.Format.RGBA, [0, 0, 0, 0]);

         var h = Math.atan2(y - center, center - x) * 180 / Math.PI;
         h = (h + 180) % 360;
         var v = brightness;
         var s = Math.max(0, distance) / center;

         var rgb = WI.Color.hsv2rgb(h, s, v);
         return new WI.Color(WI.Color.Format.RGBA, [
             Math.round(rgb[0] * 255),
             Math.round(rgb[1] * 255),
             Math.round(rgb[2] * 255),
             1
         ]);
     }

     _drawTintedCanvas()
     {
         var ctx = this._tintedCanvas.getContext("2d");
         var dimension = this._dimension * window.devicePixelRatio;

         ctx.save();
         ctx.drawImage(this._rawCanvas, 0, 0, dimension, dimension);
         if (this._brightness !== 1) {
             ctx.globalAlpha = 1 - this._brightness;
             ctx.fillStyle = "black";
             ctx.fillRect(0, 0, dimension, dimension);
         }
         ctx.restore();
     }

     _draw()
     {
         this._drawTintedCanvas();

         var ctx = this._finalCanvas.getContext("2d");
         var dimension = this._dimension * window.devicePixelRatio;
         var radius = this._radius * window.devicePixelRatio;

         ctx.save();
         ctx.clearRect(0, 0, dimension, dimension);
         ctx.beginPath();
         ctx.arc(dimension / 2, dimension / 2, radius + 1, 0, Math.PI * 2, true);
         ctx.closePath();
         ctx.clip();
         ctx.drawImage(this._tintedCanvas, 0, 0, dimension, dimension);
         ctx.restore();
     }
 };
	/*
	* Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
	*
	* Redistribution and use in source and binary forms, with or without
	* modification, are permitted provided that the following conditions
	* are met:
	* 1. Redistributions of source code must retain the above copyright
	* notice, this list of conditions and the following disclaimer.
	* 2. Redistributions in binary form must reproduce the above copyright
	* notice, this list of conditions and the following disclaimer in the
	* documentation and/or other materials provided with the distribution.
	*
	* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
	* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
	* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
	* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
	* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
	* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
	* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
	* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
	* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
	* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
	* THE POSSIBILITY OF SUCH DAMAGE.
	*/

	WI.ColorWheel = class ColorWheel extends WI.Object
	{
	constructor()
	{
	super();

	this._rawCanvas = document.createElement("canvas");
	this._tintedCanvas = document.createElement("canvas");
	this._finalCanvas = document.createElement("canvas");

	this._crosshair = document.createElement("div");
	this._crosshair.className = "crosshair";

	this._element = document.createElement("div");
	this._element.className = "color-wheel";

	this._element.appendChild(this._finalCanvas);
	this._element.appendChild(this._crosshair);

	this._finalCanvas.addEventListener("mousedown", this);
	}

	// Public

	set dimension(dimension)
	{
	this._element.style.width = this.element.style.height = `${dimension}px`;

	this._finalCanvas.width = this._tintedCanvas.width = this._rawCanvas.width = dimension * window.devicePixelRatio;
	this._finalCanvas.height = this._tintedCanvas.height = this._rawCanvas.height = dimension * window.devicePixelRatio;

	this._finalCanvas.style.width = this._finalCanvas.style.height = dimension + "px";

	this._dimension = dimension;
	// We shrink the radius a bit for better anti-aliasing.
	this._radius = dimension / 2 - 2;

	this._setCrosshairPosition(new WI.Point(dimension / 2, dimension / 2));

	this._drawRawCanvas();
	this._draw();
	}

	get element()
	{
	return this._element;
	}

	get brightness()
	{
	return this._brightness;
	}

	set brightness(brightness)
	{
	this._brightness = brightness;
	this._draw();
	}

	get tintedColor()
	{
	if (this._crosshairPosition)
	return this._colorAtPointWithBrightness(this._crosshairPosition.x * window.devicePixelRatio, this._crosshairPosition.y * window.devicePixelRatio, this._brightness);

	return new WI.Color(WI.Color.Format.RGBA, [0, 0, 0, 0]);
	}

	set tintedColor(tintedColor)
	{
	var data = this._tintedColorToPointAndBrightness(tintedColor);
	this._setCrosshairPosition(data.point);
	this.brightness = data.brightness;
	}

	get rawColor()
	{
	if (this._crosshairPosition)
	return this._colorAtPointWithBrightness(this._crosshairPosition.x * window.devicePixelRatio, this._crosshairPosition.y * window.devicePixelRatio, 1);

	return new WI.Color(WI.Color.Format.RGBA, [0, 0, 0, 0]);
	}

	// Protected

	handleEvent(event)
	{
	switch (event.type) {
	case "mousedown":
	this._handleMousedown(event);
	break;
	case "mousemove":
	this._handleMousemove(event);
	break;
	case "mouseup":
	this._handleMouseup(event);
	break;
	}
	}

	// Private

	_handleMousedown(event)
	{
	window.addEventListener("mousemove", this, true);
	window.addEventListener("mouseup", this, true);

	this._updateColorForMouseEvent(event);
	}

	_handleMousemove(event)
	{
	this._updateColorForMouseEvent(event);
	}

	_handleMouseup(event)
	{
	window.removeEventListener("mousemove", this, true);
	window.removeEventListener("mouseup", this, true);
	}

	_pointInCircleForEvent(event)
	{
	function distance(a, b)
	{
	return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
	}

	function angleFromCenterToPoint(center, point)
	{
	return Math.atan2(point.y - center.y, point.x - center.x);
	}

	function pointOnCircumference(c, r, a)
	{
	return new WI.Point(c.x + r * Math.cos(a), c.y + r * Math.sin(a));
	}

	var dimension = this._dimension;
	var point = window.webkitConvertPointFromPageToNode(this._finalCanvas, new WebKitPoint(event.pageX, event.pageY));
	var center = new WI.Point(dimension / 2, dimension / 2);
	if (distance(point, center) > this._radius) {
	var angle = angleFromCenterToPoint(center, point);
	point = pointOnCircumference(center, this._radius, angle);
	}
	return point;
	}

	_updateColorForMouseEvent(event)
	{
	var point = this._pointInCircleForEvent(event);

	this._setCrosshairPosition(point);

	if (this.delegate && typeof this.delegate.colorWheelColorDidChange === "function")
	this.delegate.colorWheelColorDidChange(this);
	}

	_setCrosshairPosition(point)
	{
	this._crosshairPosition = point;
	this._crosshair.style.webkitTransform = "translate(" + Math.round(point.x) + "px, " + Math.round(point.y) + "px)";
	}

	_tintedColorToPointAndBrightness(color)
	{
	var rgb = color.rgb;
	var hsv = WI.Color.rgb2hsv(rgb[0], rgb[1], rgb[2]);
	var cosHue = Math.cos(hsv[0] * Math.PI / 180);
	var sinHue = Math.sin(hsv[0] * Math.PI / 180);
	var center = this._dimension / 2;
	var x = center + (center * cosHue * hsv[1]);
	var y = center - (center * sinHue * hsv[1]);
	return {
	point: new WI.Point(x, y),
	brightness: hsv[2]
	};
	}

	_drawRawCanvas() {
	var ctx = this._rawCanvas.getContext("2d");

	var dimension = this._dimension * window.devicePixelRatio;

	ctx.fillStyle = "white";
	ctx.fillRect(0, 0, dimension, dimension);

	var imageData = ctx.getImageData(0, 0, dimension, dimension);
	var data = imageData.data;
	for (var j = 0; j < dimension; ++j) {
	for (var i = 0; i < dimension; ++i) {
	var color = this._colorAtPointWithBrightness(i, j, 1);
	if (!color)
	continue;
	var pos = (j * dimension + i) * 4;
	data[pos] = color.rgb[0];
	data[pos + 1] = color.rgb[1];
	data[pos + 2] = color.rgb[2];
	}
	}
	ctx.putImageData(imageData, 0, 0);
	}

	_colorAtPointWithBrightness(x, y, brightness)
	{
	var center = this._dimension / 2 * window.devicePixelRatio;
	var xDis = x - center;
	var yDis = y - center;
	var distance = Math.sqrt(xDis * xDis + yDis * yDis);

	if (distance - center > 0.001)
	return new WI.Color(WI.Color.Format.RGBA, [0, 0, 0, 0]);

	var h = Math.atan2(y - center, center - x) * 180 / Math.PI;
	h = (h + 180) % 360;
	var v = brightness;
	var s = Math.max(0, distance) / center;

	var rgb = WI.Color.hsv2rgb(h, s, v);
	return new WI.Color(WI.Color.Format.RGBA, [
	Math.round(rgb[0] * 255),
	Math.round(rgb[1] * 255),
	Math.round(rgb[2] * 255),
	1
	]);
	}

	_drawTintedCanvas()
	{
	var ctx = this._tintedCanvas.getContext("2d");
	var dimension = this._dimension * window.devicePixelRatio;

	ctx.save();
	ctx.drawImage(this._rawCanvas, 0, 0, dimension, dimension);
	if (this._brightness !== 1) {
	ctx.globalAlpha = 1 - this._brightness;
	ctx.fillStyle = "black";
	ctx.fillRect(0, 0, dimension, dimension);
	}
	ctx.restore();
	}

	_draw()
	{
	this._drawTintedCanvas();

	var ctx = this._finalCanvas.getContext("2d");
	var dimension = this._dimension * window.devicePixelRatio;
	var radius = this._radius * window.devicePixelRatio;

	ctx.save();
	ctx.clearRect(0, 0, dimension, dimension);
	ctx.beginPath();
	ctx.arc(dimension / 2, dimension / 2, radius + 1, 0, Math.PI * 2, true);
	ctx.closePath();
	ctx.clip();
	ctx.drawImage(this._tintedCanvas, 0, 0, dimension, dimension);
	ctx.restore();
	}
	};