@radial-color-picker/angular-color-picker
Version:
Radial Color Picker - Angular
70 lines • 8.73 kB
JavaScript
import { Quadrant, Cache } from './constants';
/**
* Calculates in which quadrant is the point, serves for calculating the right angle.
*
* @param point x,y coordinates of client's pointer position
*/
export const calculateQuadrant = (point) => {
if (point.x > 0) {
if (point.y > 0) {
return Quadrant.I;
}
else {
return Quadrant.IV;
}
}
else {
if (point.y > 0) {
return Quadrant.II;
}
else {
return Quadrant.III;
}
}
};
/**
* Calculates the distance between two points.
*
* This variant expects separate x/y values for each point. If you already have
* the points as array or object use the corresponding methods.
*
* @param x1 The X value of the first point.
* @param y1 The Y value of the first point.
* @param x2 The X value of the second point.
* @param y2 The Y value of the second point.
* @return The distance between the two points.
*/
export const distanceOfSegmentByXYValues = (x1, y1, x2, y2) => {
return Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
};
/**
* Calculates the angle of rotation
*
* @param point x,y coordinates of client's pointer position
* @param quadrant one of four quarters of the coordinate plane
*/
export const determineCSSRotationAngle = (point, quadrant) => {
let cx = point.x;
let cy = point.y;
let add = 0;
switch (quadrant) {
case Quadrant.II:
add = 270;
cx = ((point.x * Cache.cos90) - (point.y * Cache.sin90));
cy = ((point.x * Cache.sin90) + (point.y * Cache.cos90));
break;
case Quadrant.III:
add = 180;
cx = ((point.x * Cache.cos180) - (point.y * Cache.sin180));
cy = ((point.x * Cache.sin180) + (point.y * Cache.cos180));
break;
case Quadrant.IV:
add = 90;
cx = ((point.x * Cache.cos270) - (point.y * Cache.sin270));
cy = ((point.x * Cache.sin270) + (point.y * Cache.cos270));
break;
}
const rotation = Math.atan((distanceOfSegmentByXYValues(0, cy, cx, cy)) / (distanceOfSegmentByXYValues(0, cy, 0, 0)));
return (rotation * (180 / Math.PI)) + add;
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVscGVycy5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0ByYWRpYWwtY29sb3ItcGlja2VyL2FuZ3VsYXItY29sb3ItcGlja2VyLyIsInNvdXJjZXMiOlsibGliL2hlbHBlcnMvaGVscGVycy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUU5Qzs7OztHQUlHO0FBQ0gsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUcsQ0FBQyxLQUErQixFQUFVLEVBQUU7SUFDM0UsSUFBSSxLQUFLLENBQUMsQ0FBQyxHQUFHLENBQUMsRUFBRTtRQUNmLElBQUksS0FBSyxDQUFDLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDZixPQUFPLFFBQVEsQ0FBQyxDQUFDLENBQUM7U0FDbkI7YUFBTTtZQUNMLE9BQU8sUUFBUSxDQUFDLEVBQUUsQ0FBQztTQUNwQjtLQUNGO1NBQU07UUFDTCxJQUFJLEtBQUssQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ2YsT0FBTyxRQUFRLENBQUMsRUFBRSxDQUFDO1NBQ3BCO2FBQU07WUFDTCxPQUFPLFFBQVEsQ0FBQyxHQUFHLENBQUM7U0FDckI7S0FDRjtBQUNILENBQUMsQ0FBQztBQUdGOzs7Ozs7Ozs7OztNQVdNO0FBQ04sTUFBTSxDQUFDLE1BQU0sMkJBQTJCLEdBQUcsQ0FBQyxFQUFVLEVBQUUsRUFBVSxFQUFFLEVBQVUsRUFBRSxFQUFVLEVBQVUsRUFBRTtJQUNwRyxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLENBQUMsR0FBRyxDQUFDLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLEdBQUcsRUFBRSxDQUFDLEdBQUcsQ0FBQyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO0FBQ3RFLENBQUMsQ0FBQztBQUVGOzs7OztHQUtHO0FBQ0gsTUFBTSxDQUFDLE1BQU0seUJBQXlCLEdBQUcsQ0FBQyxLQUFLLEVBQUUsUUFBUSxFQUFFLEVBQUU7SUFDM0QsSUFBSSxFQUFFLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUNqQixJQUFJLEVBQUUsR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDO0lBQ2pCLElBQUksR0FBRyxHQUFHLENBQUMsQ0FBQztJQUNaLFFBQVEsUUFBUSxFQUFFO1FBQ2hCLEtBQUssUUFBUSxDQUFDLEVBQUU7WUFDZCxHQUFHLEdBQUcsR0FBRyxDQUFDO1lBQ1YsRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7WUFDekQsRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7WUFDekQsTUFBTTtRQUNSLEtBQUssUUFBUSxDQUFDLEdBQUc7WUFDZixHQUFHLEdBQUcsR0FBRyxDQUFDO1lBQ1YsRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7WUFDM0QsRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7WUFDM0QsTUFBTTtRQUNSLEtBQUssUUFBUSxDQUFDLEVBQUU7WUFDZCxHQUFHLEdBQUcsRUFBRSxDQUFDO1lBQ1QsRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7WUFDM0QsRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7WUFDM0QsTUFBTTtLQUNUO0lBRUQsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLDJCQUEyQixDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQywyQkFBMkIsQ0FBQyxDQUFDLEVBQUUsRUFBRSxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFFdEgsT0FBTyxDQUFDLFFBQVEsR0FBRyxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUM7QUFDNUMsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUXVhZHJhbnQsIENhY2hlIH0gZnJvbSAnLi9jb25zdGFudHMnO1xyXG5cclxuLyoqXHJcbiAqIENhbGN1bGF0ZXMgaW4gd2hpY2ggcXVhZHJhbnQgaXMgdGhlIHBvaW50LCBzZXJ2ZXMgZm9yIGNhbGN1bGF0aW5nIHRoZSByaWdodCBhbmdsZS5cclxuICpcclxuICogQHBhcmFtIHBvaW50IHgseSBjb29yZGluYXRlcyBvZiBjbGllbnQncyBwb2ludGVyIHBvc2l0aW9uXHJcbiAqL1xyXG5leHBvcnQgY29uc3QgY2FsY3VsYXRlUXVhZHJhbnQgPSAocG9pbnQ6IHsgeDogbnVtYmVyLCB5OiBudW1iZXIgfSk6IHN0cmluZyA9PiB7XHJcbiAgaWYgKHBvaW50LnggPiAwKSB7XHJcbiAgICBpZiAocG9pbnQueSA+IDApIHtcclxuICAgICAgcmV0dXJuIFF1YWRyYW50Lkk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICByZXR1cm4gUXVhZHJhbnQuSVY7XHJcbiAgICB9XHJcbiAgfSBlbHNlIHtcclxuICAgIGlmIChwb2ludC55ID4gMCkge1xyXG4gICAgICByZXR1cm4gUXVhZHJhbnQuSUk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICByZXR1cm4gUXVhZHJhbnQuSUlJO1xyXG4gICAgfVxyXG4gIH1cclxufTtcclxuXHJcblxyXG4vKipcclxuICAgICogQ2FsY3VsYXRlcyB0aGUgZGlzdGFuY2UgYmV0d2VlbiB0d28gcG9pbnRzLlxyXG4gICAgKlxyXG4gICAgKiBUaGlzIHZhcmlhbnQgZXhwZWN0cyBzZXBhcmF0ZSB4L3kgdmFsdWVzIGZvciBlYWNoIHBvaW50LiBJZiB5b3UgYWxyZWFkeSBoYXZlXHJcbiAgICAqIHRoZSBwb2ludHMgYXMgYXJyYXkgb3Igb2JqZWN0IHVzZSB0aGUgY29ycmVzcG9uZGluZyBtZXRob2RzLlxyXG4gICAgKlxyXG4gICAgKiBAcGFyYW0geDEgVGhlIFggdmFsdWUgb2YgdGhlIGZpcnN0IHBvaW50LlxyXG4gICAgKiBAcGFyYW0geTEgVGhlIFkgdmFsdWUgb2YgdGhlIGZpcnN0IHBvaW50LlxyXG4gICAgKiBAcGFyYW0geDIgVGhlIFggdmFsdWUgb2YgdGhlIHNlY29uZCBwb2ludC5cclxuICAgICogQHBhcmFtIHkyIFRoZSBZIHZhbHVlIG9mIHRoZSBzZWNvbmQgcG9pbnQuXHJcbiAgICAqIEByZXR1cm4gVGhlIGRpc3RhbmNlIGJldHdlZW4gdGhlIHR3byBwb2ludHMuXHJcbiAgICAqL1xyXG5leHBvcnQgY29uc3QgZGlzdGFuY2VPZlNlZ21lbnRCeVhZVmFsdWVzID0gKHgxOiBudW1iZXIsIHkxOiBudW1iZXIsIHgyOiBudW1iZXIsIHkyOiBudW1iZXIpOiBudW1iZXIgPT4ge1xyXG4gIHJldHVybiBNYXRoLnNxcnQoKCh4MSAtIHgyKSAqICh4MSAtIHgyKSkgKyAoKHkxIC0geTIpICogKHkxIC0geTIpKSk7XHJcbn07XHJcblxyXG4vKipcclxuICogQ2FsY3VsYXRlcyB0aGUgYW5nbGUgb2Ygcm90YXRpb25cclxuICpcclxuICogQHBhcmFtIHBvaW50IHgseSBjb29yZGluYXRlcyBvZiBjbGllbnQncyBwb2ludGVyIHBvc2l0aW9uXHJcbiAqIEBwYXJhbSBxdWFkcmFudCBvbmUgb2YgZm91ciBxdWFydGVycyBvZiB0aGUgY29vcmRpbmF0ZSBwbGFuZVxyXG4gKi9cclxuZXhwb3J0IGNvbnN0IGRldGVybWluZUNTU1JvdGF0aW9uQW5nbGUgPSAocG9pbnQsIHF1YWRyYW50KSA9PiB7XHJcbiAgbGV0IGN4ID0gcG9pbnQueDtcclxuICBsZXQgY3kgPSBwb2ludC55O1xyXG4gIGxldCBhZGQgPSAwO1xyXG4gIHN3aXRjaCAocXVhZHJhbnQpIHtcclxuICAgIGNhc2UgUXVhZHJhbnQuSUk6XHJcbiAgICAgIGFkZCA9IDI3MDtcclxuICAgICAgY3ggPSAoKHBvaW50LnggKiBDYWNoZS5jb3M5MCkgLSAocG9pbnQueSAqIENhY2hlLnNpbjkwKSk7XHJcbiAgICAgIGN5ID0gKChwb2ludC54ICogQ2FjaGUuc2luOTApICsgKHBvaW50LnkgKiBDYWNoZS5jb3M5MCkpO1xyXG4gICAgICBicmVhaztcclxuICAgIGNhc2UgUXVhZHJhbnQuSUlJOlxyXG4gICAgICBhZGQgPSAxODA7XHJcbiAgICAgIGN4ID0gKChwb2ludC54ICogQ2FjaGUuY29zMTgwKSAtIChwb2ludC55ICogQ2FjaGUuc2luMTgwKSk7XHJcbiAgICAgIGN5ID0gKChwb2ludC54ICogQ2FjaGUuc2luMTgwKSArIChwb2ludC55ICogQ2FjaGUuY29zMTgwKSk7XHJcbiAgICAgIGJyZWFrO1xyXG4gICAgY2FzZSBRdWFkcmFudC5JVjpcclxuICAgICAgYWRkID0gOTA7XHJcbiAgICAgIGN4ID0gKChwb2ludC54ICogQ2FjaGUuY29zMjcwKSAtIChwb2ludC55ICogQ2FjaGUuc2luMjcwKSk7XHJcbiAgICAgIGN5ID0gKChwb2ludC54ICogQ2FjaGUuc2luMjcwKSArIChwb2ludC55ICogQ2FjaGUuY29zMjcwKSk7XHJcbiAgICAgIGJyZWFrO1xyXG4gIH1cclxuXHJcbiAgY29uc3Qgcm90YXRpb24gPSBNYXRoLmF0YW4oKGRpc3RhbmNlT2ZTZWdtZW50QnlYWVZhbHVlcygwLCBjeSwgY3gsIGN5KSkgLyAoZGlzdGFuY2VPZlNlZ21lbnRCeVhZVmFsdWVzKDAsIGN5LCAwLCAwKSkpO1xyXG5cclxuICByZXR1cm4gKHJvdGF0aW9uICogKDE4MCAvIE1hdGguUEkpKSArIGFkZDtcclxufTtcclxuIl19