moved to root
This commit is contained in:
Andrew Zambazos
@@ -0,0 +1,225 @@
|
||||
/*
|
||||
* 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(delegate, dimension)
|
||||
{
|
||||
console.assert(!isNaN(dimension));
|
||||
|
||||
super();
|
||||
|
||||
this._delegate = delegate;
|
||||
|
||||
this._brightness = 50;
|
||||
|
||||
this._element = document.createElement("div");
|
||||
this._element.className = "color-wheel";
|
||||
|
||||
this._canvasElement = this._element.appendChild(document.createElement("canvas"));
|
||||
this._canvasElement.addEventListener("mousedown", this);
|
||||
|
||||
this._canvasContext = this._canvasElement.getContext("2d");
|
||||
|
||||
this._crosshairElement = this._element.appendChild(document.createElement("div"));
|
||||
this._crosshairElement.className = "crosshair";
|
||||
|
||||
this.dimension = dimension;
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
get element() { return this._element; }
|
||||
|
||||
set dimension(dimension)
|
||||
{
|
||||
if (dimension === this._dimension)
|
||||
return;
|
||||
|
||||
this._dimension = dimension;
|
||||
|
||||
this._element.style.width = this.element.style.height = `${this._dimension}px`;
|
||||
this._canvasElement.width = this._canvasElement.height = this._dimension * window.devicePixelRatio;
|
||||
|
||||
let center = this._dimension / 2;
|
||||
this._setCrosshairPosition(new WI.Point(center, center));
|
||||
|
||||
this._updateCanvas();
|
||||
}
|
||||
|
||||
get brightness()
|
||||
{
|
||||
return this._brightness;
|
||||
}
|
||||
|
||||
set brightness(brightness)
|
||||
{
|
||||
if (brightness === this._brightness)
|
||||
return;
|
||||
|
||||
this._brightness = brightness;
|
||||
|
||||
this._updateCanvas();
|
||||
}
|
||||
|
||||
get tintedColor()
|
||||
{
|
||||
if (this._crosshairPosition)
|
||||
return new WI.Color(WI.Color.Format.HSL, [this._hue, this._saturation, this._brightness]);
|
||||
return new WI.Color(WI.Color.Format.HSLA, [0, 0, 0, 0]);
|
||||
}
|
||||
|
||||
set tintedColor(tintedColor)
|
||||
{
|
||||
let hsl = tintedColor.hsl;
|
||||
|
||||
let cosHue = Math.cos(hsl[0] * Math.PI / 180);
|
||||
let sinHue = Math.sin(hsl[0] * Math.PI / 180);
|
||||
let center = this._dimension / 2;
|
||||
let x = center + (sinHue * hsl[1]);
|
||||
let y = center - (cosHue * hsl[1]);
|
||||
this._setCrosshairPosition(new WI.Point(x, y));
|
||||
|
||||
this.brightness = hsl[2];
|
||||
}
|
||||
|
||||
get rawColor()
|
||||
{
|
||||
if (this._crosshairPosition)
|
||||
return new WI.Color(WI.Color.Format.HSL, [this._hue, this._saturation, 50]);
|
||||
return new WI.Color(WI.Color.Format.HSLA, [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
|
||||
|
||||
get _hue()
|
||||
{
|
||||
let center = this._dimension / 2;
|
||||
let hue = Math.atan2(this._crosshairPosition.x - center, center - this._crosshairPosition.y) * 180 / Math.PI;
|
||||
if (hue < 0)
|
||||
hue += 360;
|
||||
return hue;
|
||||
}
|
||||
|
||||
get _saturation()
|
||||
{
|
||||
let center = this._dimension / 2;
|
||||
let xDis = (this._crosshairPosition.x - center) / center;
|
||||
let yDis = (this._crosshairPosition.y - center) / center;
|
||||
return Math.sqrt(Math.pow(xDis, 2) + Math.pow(yDis, 2)) * 100;
|
||||
}
|
||||
|
||||
_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);
|
||||
}
|
||||
|
||||
_updateColorForMouseEvent(event)
|
||||
{
|
||||
var point = window.webkitConvertPointFromPageToNode(this._canvasElement, new WebKitPoint(event.pageX, event.pageY));
|
||||
|
||||
this._setCrosshairPosition(point);
|
||||
|
||||
if (this._delegate && typeof this._delegate.colorWheelColorDidChange === "function")
|
||||
this._delegate.colorWheelColorDidChange(this);
|
||||
}
|
||||
|
||||
_setCrosshairPosition(point)
|
||||
{
|
||||
let radius = this._dimension / 2;
|
||||
let center = new WI.Point(radius, radius);
|
||||
|
||||
// Prevents the crosshair from being dragged outside the wheel.
|
||||
if (center.distance(point) > radius) {
|
||||
let angle = Math.atan2(point.y - center.y, point.x - center.x);
|
||||
point = new WI.Point(center.x + radius * Math.cos(angle), center.y + radius * Math.sin(angle));
|
||||
}
|
||||
|
||||
this._crosshairPosition = point;
|
||||
this._crosshairElement.style.setProperty("transform", "translate(" + Math.round(point.x) + "px, " + Math.round(point.y) + "px)");
|
||||
}
|
||||
|
||||
_updateCanvas()
|
||||
{
|
||||
let dimension = this._dimension * window.devicePixelRatio;
|
||||
let center = dimension / 2;
|
||||
|
||||
let imageData = this._canvasContext.createImageData(dimension, dimension);
|
||||
for (let y = 0; y < dimension; ++y) {
|
||||
for (let x = 0; x < dimension; ++x) {
|
||||
let xDis = (x - center) / center;
|
||||
let yDis = (y - center) / center;
|
||||
let saturation = Math.sqrt(Math.pow(xDis, 2) + Math.pow(yDis, 2)) * 100;
|
||||
if (saturation > 100)
|
||||
continue;
|
||||
|
||||
let hue = Math.atan2(x - center, center - y) * 180 / Math.PI;
|
||||
if (hue < 0)
|
||||
hue += 360;
|
||||
|
||||
let rgb = WI.Color.hsl2rgb(hue, saturation, this._brightness);
|
||||
|
||||
let index = ((y * dimension) + x) * 4;
|
||||
imageData.data[index] = rgb[0];
|
||||
imageData.data[index + 1] = rgb[1];
|
||||
imageData.data[index + 2] = rgb[2];
|
||||
imageData.data[index + 3] = 255;
|
||||
}
|
||||
}
|
||||
|
||||
this._canvasContext.putImageData(imageData, 0, 0);
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user