@aurigma/design-atoms-model
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
130 lines • 4.42 kB
JavaScript
import { RgbColor } from "./RgbColor";
import { Clamp } from "../Math";
import { validateComponent } from "./ValidationUtils";
var HsbColor = /** @class */ (function () {
function HsbColor(h, s, b, alpha) {
this._h = validateComponent(h, 0, 1);
this._s = validateComponent(s, 0, 1);
this._b = validateComponent(b, 0, 1);
this._alpha = validateComponent(alpha);
}
Object.defineProperty(HsbColor.prototype, "h", {
/**
* Hue in range [0, 1]
*/
get: function () {
return this._h;
},
enumerable: true,
configurable: true
});
Object.defineProperty(HsbColor.prototype, "s", {
/**
* Saturation in range [0, 1]
*/
get: function () {
return this._s;
},
enumerable: true,
configurable: true
});
Object.defineProperty(HsbColor.prototype, "b", {
/**
* Brightness in range [0, 1]
*/
get: function () {
return this._b;
},
enumerable: true,
configurable: true
});
Object.defineProperty(HsbColor.prototype, "alpha", {
/**
* Alpha in range [0, 255]
*/
get: function () {
return this._alpha;
},
enumerable: true,
configurable: true
});
HsbColor.fromRgb = function (rgbColor) {
var r = rgbColor.r / 255;
var g = rgbColor.g / 255;
var b = rgbColor.b / 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var hue = max;
var brightness = max;
var d = max - min;
var saturation = max === 0 ? 0 : d / max;
if (max === min) {
hue = 0; // achromatic
}
else {
switch (max) {
case r:
hue = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
hue = (b - r) / d + 2;
break;
case b:
hue = (r - g) / d + 4;
break;
}
hue /= 6 % 360;
}
return new HsbColor(hue, saturation, brightness, rgbColor.alpha);
};
HsbColor.prototype.toRgb = function () {
var h = this.h * 6, i = Math.floor(h), f = h - i, p = this.b * (1 - this.s), q = this.b * (1 - f * this.s), t = this.b * (1 - (1 - f) * this.s), mod = i % 6, r = Math.round([this.b, q, p, p, t, this.b][mod] * 255), g = Math.round([t, this.b, this.b, q, p, p][mod] * 255), b = Math.round([p, p, t, this.b, this.b, q][mod] * 255);
return new RgbColor(r, g, b, this.alpha);
};
HsbColor.prototype.clone = function () {
return new HsbColor(this.h, this.s, this.b, this.alpha);
};
HsbColor.prototype.decreaseHue = function (value) {
var result = this.clone();
result._h = Clamp(0, result.h - value, 1);
return result;
};
HsbColor.prototype.increaseHue = function (value) {
var result = this.clone();
result._h = Clamp(0, result.h + value, 1);
return result;
};
HsbColor.prototype.desaturate = function (value) {
var result = this.clone();
result._s = Clamp(0, result.s - value, 1);
return result;
};
HsbColor.prototype.saturate = function (value) {
var result = this.clone();
result._s = Clamp(0, result.s + value, 1);
return result;
};
HsbColor.prototype.darken = function (value) {
var result = this.clone();
result._b = Clamp(0, result.b - value, 1);
return result;
};
HsbColor.prototype.lighten = function (value) {
var result = this.clone();
result._b = Clamp(0, result.b + value, 1);
return result;
};
HsbColor.prototype.decreaseAlpha = function (value) {
var result = this.clone();
result._alpha = Clamp(0, result.alpha - value, 255);
return result;
};
HsbColor.prototype.increaseAlpha = function (value) {
var result = this.clone();
result._alpha = Clamp(0, result.alpha + value, 255);
return result;
};
return HsbColor;
}());
export { HsbColor };
//# sourceMappingURL=HsbColor.js.map