angular-color-picker-fixed
Version:
Radial Color Picker - Angular
70 lines • 8.47 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVscGVycy5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0ByYWRpYWwtY29sb3ItcGlja2VyL2FuZ3VsYXItY29sb3ItcGlja2VyLyIsInNvdXJjZXMiOlsibGliL2hlbHBlcnMvaGVscGVycy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUU5Qzs7OztHQUlHO0FBQ0gsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUcsQ0FBQyxLQUErQixFQUFVLEVBQUU7SUFDM0UsSUFBSSxLQUFLLENBQUMsQ0FBQyxHQUFHLENBQUMsRUFBRTtRQUNmLElBQUksS0FBSyxDQUFDLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDZixPQUFPLFFBQVEsQ0FBQyxDQUFDLENBQUM7U0FDbkI7YUFBTTtZQUNMLE9BQU8sUUFBUSxDQUFDLEVBQUUsQ0FBQztTQUNwQjtLQUNGO1NBQU07UUFDTCxJQUFJLEtBQUssQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ2YsT0FBTyxRQUFRLENBQUMsRUFBRSxDQUFDO1NBQ3BCO2FBQU07WUFDTCxPQUFPLFFBQVEsQ0FBQyxHQUFHLENBQUM7U0FDckI7S0FDRjtBQUNILENBQUMsQ0FBQztBQUdGOzs7Ozs7Ozs7OztNQVdNO0FBQ04sTUFBTSxDQUFDLE1BQU0sMkJBQTJCLEdBQUcsQ0FBQyxFQUFVLEVBQUUsRUFBVSxFQUFFLEVBQVUsRUFBRSxFQUFVLEVBQVUsRUFBRTtJQUNwRyxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLENBQUMsR0FBRyxDQUFDLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLEdBQUcsRUFBRSxDQUFDLEdBQUcsQ0FBQyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO0FBQ3RFLENBQUMsQ0FBQztBQUVGOzs7OztHQUtHO0FBQ0gsTUFBTSxDQUFDLE1BQU0seUJBQXlCLEdBQUcsQ0FBQyxLQUFLLEVBQUUsUUFBUSxFQUFFLEVBQUU7SUFDM0QsSUFBSSxFQUFFLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUNqQixJQUFJLEVBQUUsR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDO0lBQ2pCLElBQUksR0FBRyxHQUFHLENBQUMsQ0FBQztJQUNaLFFBQVEsUUFBUSxFQUFFO1FBQ2hCLEtBQUssUUFBUSxDQUFDLEVBQUU7WUFDZCxHQUFHLEdBQUcsR0FBRyxDQUFDO1lBQ1YsRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7WUFDekQsRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7WUFDekQsTUFBTTtRQUNSLEtBQUssUUFBUSxDQUFDLEdBQUc7WUFDZixHQUFHLEdBQUcsR0FBRyxDQUFDO1lBQ1YsRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7WUFDM0QsRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7WUFDM0QsTUFBTTtRQUNSLEtBQUssUUFBUSxDQUFDLEVBQUU7WUFDZCxHQUFHLEdBQUcsRUFBRSxDQUFDO1lBQ1QsRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7WUFDM0QsRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7WUFDM0QsTUFBTTtLQUNUO0lBRUQsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLDJCQUEyQixDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQywyQkFBMkIsQ0FBQyxDQUFDLEVBQUUsRUFBRSxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFFdEgsT0FBTyxDQUFDLFFBQVEsR0FBRyxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUM7QUFDNUMsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUXVhZHJhbnQsIENhY2hlIH0gZnJvbSAnLi9jb25zdGFudHMnO1xuXG4vKipcbiAqIENhbGN1bGF0ZXMgaW4gd2hpY2ggcXVhZHJhbnQgaXMgdGhlIHBvaW50LCBzZXJ2ZXMgZm9yIGNhbGN1bGF0aW5nIHRoZSByaWdodCBhbmdsZS5cbiAqXG4gKiBAcGFyYW0gcG9pbnQgeCx5IGNvb3JkaW5hdGVzIG9mIGNsaWVudCdzIHBvaW50ZXIgcG9zaXRpb25cbiAqL1xuZXhwb3J0IGNvbnN0IGNhbGN1bGF0ZVF1YWRyYW50ID0gKHBvaW50OiB7IHg6IG51bWJlciwgeTogbnVtYmVyIH0pOiBzdHJpbmcgPT4ge1xuICBpZiAocG9pbnQueCA+IDApIHtcbiAgICBpZiAocG9pbnQueSA+IDApIHtcbiAgICAgIHJldHVybiBRdWFkcmFudC5JO1xuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4gUXVhZHJhbnQuSVY7XG4gICAgfVxuICB9IGVsc2Uge1xuICAgIGlmIChwb2ludC55ID4gMCkge1xuICAgICAgcmV0dXJuIFF1YWRyYW50LklJO1xuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4gUXVhZHJhbnQuSUlJO1xuICAgIH1cbiAgfVxufTtcblxuXG4vKipcbiAgICAqIENhbGN1bGF0ZXMgdGhlIGRpc3RhbmNlIGJldHdlZW4gdHdvIHBvaW50cy5cbiAgICAqXG4gICAgKiBUaGlzIHZhcmlhbnQgZXhwZWN0cyBzZXBhcmF0ZSB4L3kgdmFsdWVzIGZvciBlYWNoIHBvaW50LiBJZiB5b3UgYWxyZWFkeSBoYXZlXG4gICAgKiB0aGUgcG9pbnRzIGFzIGFycmF5IG9yIG9iamVjdCB1c2UgdGhlIGNvcnJlc3BvbmRpbmcgbWV0aG9kcy5cbiAgICAqXG4gICAgKiBAcGFyYW0geDEgVGhlIFggdmFsdWUgb2YgdGhlIGZpcnN0IHBvaW50LlxuICAgICogQHBhcmFtIHkxIFRoZSBZIHZhbHVlIG9mIHRoZSBmaXJzdCBwb2ludC5cbiAgICAqIEBwYXJhbSB4MiBUaGUgWCB2YWx1ZSBvZiB0aGUgc2Vjb25kIHBvaW50LlxuICAgICogQHBhcmFtIHkyIFRoZSBZIHZhbHVlIG9mIHRoZSBzZWNvbmQgcG9pbnQuXG4gICAgKiBAcmV0dXJuIFRoZSBkaXN0YW5jZSBiZXR3ZWVuIHRoZSB0d28gcG9pbnRzLlxuICAgICovXG5leHBvcnQgY29uc3QgZGlzdGFuY2VPZlNlZ21lbnRCeVhZVmFsdWVzID0gKHgxOiBudW1iZXIsIHkxOiBudW1iZXIsIHgyOiBudW1iZXIsIHkyOiBudW1iZXIpOiBudW1iZXIgPT4ge1xuICByZXR1cm4gTWF0aC5zcXJ0KCgoeDEgLSB4MikgKiAoeDEgLSB4MikpICsgKCh5MSAtIHkyKSAqICh5MSAtIHkyKSkpO1xufTtcblxuLyoqXG4gKiBDYWxjdWxhdGVzIHRoZSBhbmdsZSBvZiByb3RhdGlvblxuICpcbiAqIEBwYXJhbSBwb2ludCB4LHkgY29vcmRpbmF0ZXMgb2YgY2xpZW50J3MgcG9pbnRlciBwb3NpdGlvblxuICogQHBhcmFtIHF1YWRyYW50IG9uZSBvZiBmb3VyIHF1YXJ0ZXJzIG9mIHRoZSBjb29yZGluYXRlIHBsYW5lXG4gKi9cbmV4cG9ydCBjb25zdCBkZXRlcm1pbmVDU1NSb3RhdGlvbkFuZ2xlID0gKHBvaW50LCBxdWFkcmFudCkgPT4ge1xuICBsZXQgY3ggPSBwb2ludC54O1xuICBsZXQgY3kgPSBwb2ludC55O1xuICBsZXQgYWRkID0gMDtcbiAgc3dpdGNoIChxdWFkcmFudCkge1xuICAgIGNhc2UgUXVhZHJhbnQuSUk6XG4gICAgICBhZGQgPSAyNzA7XG4gICAgICBjeCA9ICgocG9pbnQueCAqIENhY2hlLmNvczkwKSAtIChwb2ludC55ICogQ2FjaGUuc2luOTApKTtcbiAgICAgIGN5ID0gKChwb2ludC54ICogQ2FjaGUuc2luOTApICsgKHBvaW50LnkgKiBDYWNoZS5jb3M5MCkpO1xuICAgICAgYnJlYWs7XG4gICAgY2FzZSBRdWFkcmFudC5JSUk6XG4gICAgICBhZGQgPSAxODA7XG4gICAgICBjeCA9ICgocG9pbnQueCAqIENhY2hlLmNvczE4MCkgLSAocG9pbnQueSAqIENhY2hlLnNpbjE4MCkpO1xuICAgICAgY3kgPSAoKHBvaW50LnggKiBDYWNoZS5zaW4xODApICsgKHBvaW50LnkgKiBDYWNoZS5jb3MxODApKTtcbiAgICAgIGJyZWFrO1xuICAgIGNhc2UgUXVhZHJhbnQuSVY6XG4gICAgICBhZGQgPSA5MDtcbiAgICAgIGN4ID0gKChwb2ludC54ICogQ2FjaGUuY29zMjcwKSAtIChwb2ludC55ICogQ2FjaGUuc2luMjcwKSk7XG4gICAgICBjeSA9ICgocG9pbnQueCAqIENhY2hlLnNpbjI3MCkgKyAocG9pbnQueSAqIENhY2hlLmNvczI3MCkpO1xuICAgICAgYnJlYWs7XG4gIH1cblxuICBjb25zdCByb3RhdGlvbiA9IE1hdGguYXRhbigoZGlzdGFuY2VPZlNlZ21lbnRCeVhZVmFsdWVzKDAsIGN5LCBjeCwgY3kpKSAvIChkaXN0YW5jZU9mU2VnbWVudEJ5WFlWYWx1ZXMoMCwgY3ksIDAsIDApKSk7XG5cbiAgcmV0dXJuIChyb3RhdGlvbiAqICgxODAgLyBNYXRoLlBJKSkgKyBhZGQ7XG59O1xuIl19