Commit 2b04be01 authored by Zéfling's avatar Zéfling 🎨

Add mask color in addColor et add an example for it

parent 5e3f3fb1
{
"name": "coloration-demo",
"version": "0.0.2",
"version": "0.0.3",
"license": "MIT",
"repository": {
"type": "git",
......
{
"name": "coloration-lib",
"version": "0.0.2",
"version": "0.0.3",
"license": "MIT",
"repository": {
"type": "git",
......
......@@ -28,6 +28,8 @@ export interface ColorData {
/** Value/lightness value [-100,100] */ v?: number;
// Other
/** luminosity value [-1,1] */ luminosity?: number;
/** color mask */ maskColor?: string;
/** color mask opacity [0,1] */ maskOpacity?: number;
}
export class Coloration {
......@@ -88,6 +90,7 @@ export class Coloration {
/**
* change the luminosity of a color
* @param lum value between -1 and 1
* @returns Coloration
*/
changeLuminosity(lum: number): Coloration {
lum = this.minmax(lum, -1, 1);
......@@ -99,6 +102,7 @@ export class Coloration {
* add color with a mark
* @param color additional color
* @param opacity value of opacity between 0 and 1 for the additional color
* @returns Coloration
*/
maskColor(color: string, opacity: number = 1): Coloration {
......@@ -123,12 +127,17 @@ export class Coloration {
/**
* change color with color parameters
* @param colorData additionnal parameters
* @returns Coloration
*/
addColor(colorData: ColorData) {
if (colorData.luminosity) {
this.changeLuminosity(colorData.luminosity);
}
if (colorData.maskColor) {
this.maskColor(colorData.maskColor, this.minmax(colorData.maskOpacity || 0, 0, 1));
}
if (colorData.r || colorData.g || colorData.b) {
if (colorData.r) {
console.log(this.rgb.r, colorData.r, this.rgb.r + colorData.r);
......@@ -167,7 +176,7 @@ export class Coloration {
* @returns RGB
*/
getRGB(): RGB {
return Object.assign({}, this.rgb);
return this.value<RGB>(() => Object.assign({}, this.rgb));
}
/**
......@@ -175,7 +184,7 @@ export class Coloration {
* @returns HSV
*/
getHSV(): HSV {
return Object.assign({}, this.hsv);
return this.value<HSV>(() => Object.assign({}, this.hsv));
}
/**
......@@ -183,7 +192,7 @@ export class Coloration {
* @returns string of #HEX
*/
toHEX(): string {
return '#' + (0x1000000 + this.intColor).toString(16).slice(1);
return this.value<string>(() => '#' + (0x1000000 + this.intColor).toString(16).slice(1));
}
/**
......@@ -191,7 +200,7 @@ export class Coloration {
* @returns string of HVL(H, S%, V%)
*/
toHSL(): string {
return `hsl(${this.hsv.h}, ${this.hsv.s}%, ${this.hsv.v}%)`;
return this.value<string>(() => `hsl(${this.hsv.h}, ${this.hsv.s}%, ${this.hsv.v}%)`);
}
/**
......@@ -199,7 +208,7 @@ export class Coloration {
* @returns string of RGB(R, G, B)
*/
toRGB(): string {
return `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b})`;
return this.value<string>(() => `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b})`);
}
/**
......@@ -378,4 +387,13 @@ export class Coloration {
return Math.min(Math.max(value || defaultValue, min), max);
}
/**
* test is intColor is valid for return a vlaue
* @param value callback of value
* @returns value or null
*/
private value<L>(value: () => L): L {
return !isNaN(this.intColor) ? value() : null;
}
}
<h1>{{ title }}</h1>
<h1>coloration-lib</h1>
<h2>Test to change color: </h2>
<main>
......@@ -7,7 +7,9 @@
<legend>Base</legend>
<label>Color : <input type="text"
[(value)]="baseColor"
(change)="baseColor = $event.target.value"></label>
(change)="baseColor = $event.target.value"
placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
<div [style.background-color]="baseColor">&nbsp;</div>
</fieldset>
......@@ -70,25 +72,44 @@
[value]="value"
(change)="value = $event.target.value"></label>
</div>
<div class="maskColor">
<label><span>Mask color:</span><input type="text"
[value]="maskColor"
(change)="maskColor = $event.target.value"
placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
</div>
<div class="maskOpacity">
<label><span>Mask opacity:</span><input type="number"
min="0"
max="1"
step="0.01"
[value]="maskOpacity"
(change)="maskOpacity = $event.target.value"></label>
</div>
</div>
<div>
<div class="button">
<button type="button"
(click)="change()">Change</button>
</div>
</fieldset>
</form>
<aside>
<div>
HEX : {{colorHex}}
<div [style.background-color]="colorHex">&nbsp;</div>
</div>
<div>
RGB : {{colorRgb}}
<div [style.background-color]="colorRgb">&nbsp;</div>
</div>
<div>
HSL : {{colorHsl}}
<div [style.background-color]="colorHsl">&nbsp;</div>
</div>
<fieldset>
<legend>Result</legend>
<div [style.background-image]="colorHex ? 'linear-gradient(to right, '+baseColor+', '+colorHex+')' : baseColor">&nbsp;</div>
<div>
HEX : {{colorHex || '--'}}
<div [style.background-color]="colorHex">&nbsp;</div>
</div>
<div>
RGB : {{colorRgb || '--'}}
<div [style.background-color]="colorRgb">&nbsp;</div>
</div>
<div>
HSL : {{colorHsl || '--'}}
<div [style.background-color]="colorHsl">&nbsp;</div>
</div>
</fieldset>
</aside>
</main>
\ No newline at end of file
......@@ -5,7 +5,7 @@ main {
}
form {
flex: 2;
flex: 3;
}
aside {
......@@ -17,9 +17,10 @@ aside {
display: grid;
width: 100%;
grid-template:
"lum . . " 35px
"red green blue " 35px
"hue sat value" 35px / 1fr 1fr 1fr;
"lum . . " 35px
"color opacity . " 35px
"red green blue " 35px
"hue sat value" 35px / 1fr 1fr 1fr;
label {
display:flex;
......@@ -30,14 +31,23 @@ aside {
span {
flex: 1;
}
input {
width: 120px;
}
}
.luminosity {
grid-area: lum;
}
.luminosity { grid-area: lum; }
.maskColor { grid-area: color;}
.maskOpacity{ grid-area: opacity;}
.red { grid-area: red;}
.green { grid-area: green;}
.blue { grid-area: blue;}
.hue {grid-area: hue;}
.saturation { grid-area: sat;}
.value{ grid-area: value;}
\ No newline at end of file
.value{ grid-area: value;}
.button {
text-align: center;
padding-top: 10px;
}
\ No newline at end of file
......@@ -7,8 +7,6 @@ import { Coloration } from 'projects/coloration/src/public_api';
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'coloration-demo';
baseColor = '';
luminosity = 0.00;
......@@ -18,6 +16,8 @@ export class AppComponent {
hue = 0;
saturation = 0;
value = 0;
maskColor = '';
maskOpacity = 1;
colorHex: string;
colorRgb: string;
......@@ -35,7 +35,9 @@ export class AppComponent {
h: this.hue,
s: this.saturation,
v: this.value,
luminosity: this.luminosity
luminosity: this.luminosity,
maskColor: this.maskColor,
maskOpacity: this.maskOpacity
});
console.log(color);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment