Skip to content

Commit

Permalink
feat: cmyk color handling
Browse files Browse the repository at this point in the history
  • Loading branch information
@HitkoDev
HitkoDev committed Jun 13, 2022
1 parent 594d7db commit 9435a69
Show file tree
Hide file tree
Showing 19 changed files with 594 additions and 139 deletions.
154 changes: 125 additions & 29 deletions .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
"files": [
"*.ts"
],
"plugins": [
"deprecation",
"unused-imports"
],
"parserOptions": {
"project": [
"tsconfig.json"
Expand All @@ -20,27 +24,98 @@
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@typescript-eslint/consistent-type-definitions": "error",
"@typescript-eslint/dot-notation": "off",
"@typescript-eslint/explicit-member-accessibility": [
"off",
"deprecation/deprecation": "warn",
"@typescript-eslint/member-ordering": [
"error",
{
"accessibility": "explicit"
"default": [
"public-static-field",
"static-field",
"instance-field"
]
}
],
"@typescript-eslint/no-floating-promises": "error",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-unused-expressions": "off",
"@typescript-eslint/no-var-requires": "error",
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": false
}
],
"import/no-internal-modules": "off",
"linebreak-style": "off",
"no-duplicate-case": "error",
"no-duplicate-imports": "error",
"no-extra-bind": "error",
"no-fallthrough": "off",
"no-new-func": "error",
"no-return-await": "error",
"no-sequences": "error",
"no-sparse-arrays": "error",
"no-template-curly-in-string": "error",
"prefer-object-spread": "error",
"space-in-parens": [
"error",
"never"
],
"@typescript-eslint/consistent-type-assertions": [
"off"
],
"no-redeclare": "off",
"@typescript-eslint/no-redeclare": [
"error"
],
"@typescript-eslint/naming-convention": [
"off"
],
"@typescript-eslint/member-delimiter-style": [
"error",
{
"multiline": {
"delimiter": "none",
"requireLast": true
"requireLast": false
},
"singleline": {
"delimiter": "semi",
"delimiter": "comma",
"requireLast": false
}
}
],
"space-before-function-paren": [
"error",
{
"anonymous": "always",
"named": "never",
"asyncArrow": "always"
}
],
"prefer-arrow/prefer-arrow-functions": [
"error",
{
"disallowPrototype": true,
"singleReturnOnly": false,
"classPropertiesAllowed": false,
"allowStandaloneDeclarations": true
}
],
"@typescript-eslint/array-type": [
"error",
{
"default": "array-simple",
"readonly": "generic"
}
],
"@typescript-eslint/consistent-type-definitions": "error",
"@typescript-eslint/dot-notation": "off",
"@typescript-eslint/explicit-member-accessibility": [
"off",
{
"accessibility": "explicit"
}
],
"@typescript-eslint/no-empty-interface": "off",
"@typescript-eslint/no-inferrable-types": "off",
"@typescript-eslint/quotes": [
Expand All @@ -59,6 +134,7 @@
"1tbs"
],
"comma-dangle": "error",
"curly": "off",
"eqeqeq": [
"off",
"always"
Expand All @@ -68,41 +144,61 @@
"import/order": "error",
"max-len": "off",
"no-bitwise": "off",
"no-underscore-dangle": "off",
"@typescript-eslint/member-ordering": [
"error",
{
"default": {
"memberTypes": [
"field",
"signature",
"constructor",
"method"
]
}
}
],
"no-multiple-empty-lines": [
"error",
{
"max": 1,
"maxBOF": 0
}
],
"prefer-arrow/prefer-arrow-functions": [
"no-underscore-dangle": "off",
"quote-props": [
"error",
"consistent-as-needed"
],
"@typescript-eslint/no-namespace": "off",
"no-console": "off",
"@angular-eslint/no-output-native": "off",
"@angular-eslint/template/no-negated-async": "off",
"@typescript-eslint/no-this-alias": "off",
"no-unused-labels": "off",
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "off",
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"error",
{
"disallowPrototype": true,
"singleReturnOnly": false,
"classPropertiesAllowed": false,
"allowStandaloneDeclarations": true
"vars": "all",
"varsIgnorePattern": "^_",
"args": "after-used",
"argsIgnorePattern": "^_"
}
],
"@typescript-eslint/naming-convention": [
"off"
]
}
},
{
"files": [
"*.spec.ts",
"test.ts",
"*.config.js",
"*.config.ts",
"*.conf.js",
"*.conf.ts",
"gulpfile.ts",
"**/mocks/**/*.ts",
"scripts/**/*.ts",
"test/**/*.cjs"
],
"rules": {
"import/no-extraneous-dependencies": [
"off",
{
"devDependencies": false
}
],
"@typescript-eslint/no-var-requires": "off"
}
},
{
"files": [
"*.html"
Expand Down
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ import { ColorPickerModule } from 'nxt-color-picker';

[cpMode] // Dialog color mode: 'color', 'grayscale', 'presets' ('color').

[cpCmykEnabled] // Enables CMYK input format and color change event (false).

[cpOutputFormat] // Output color format: OutputFormat (OutputFormat.auto).
[cpAlphaChannel] // Alpha mode: AlphaChannel (AlphaChannel.enabled).
[cpFallbackColor] // Used when the color is not well-formed or is undefined ('#000').
Expand Down Expand Up @@ -117,6 +119,8 @@ import { ColorPickerModule } from 'nxt-color-picker';
(cpColorSelect) // Selected color value, send when OK button pressed or user clicks outside (if cpSaveClickOutside is true). (value: string).
(cpColorChange) // Changed color value, send when color is changed (value: string).

(cpCmykColorChange) // Outputs the color as CMYK string if CMYK is enabled (value: string).

(cpPresetColorsChange) // Preset colors, send when 'Add Color' button is pressed (value: array).
```

Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,11 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^14.0.1",
"@angular/common": "^14.0.1",
"@angular/compiler": "^14.0.1",
"@angular/core": "^14.0.1",
"@angular/forms": "^14.0.1",
"@angular/platform-browser": "^14.0.1",
"@angular/platform-browser-dynamic": "^14.0.1",
"@angular/router": "^14.0.1",
"@babel/core": "^7.18.5",
"@babel/generator": "^7.18.2",
"@babel/preset-env": "^7.18.2",
Expand Down Expand Up @@ -49,13 +46,16 @@
"angular-cli-ghpages": "^1.0.0",
"cross-env": "^7.0.3",
"eslint": "^8.17.0",
"eslint-plugin-deprecation": "^1.3.2",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jsdoc": "^39.3.2",
"eslint-plugin-prefer-arrow": "latest",
"eslint-plugin-unused-imports": "^2.0.0",
"jasmine-core": "^4.2.0",
"jasmine-spec-reporter": "^7.0.0",
"karma": "^6.3.20",
"karma-chrome-launcher": "^3.1.1",
"karma-coverage": "^2.2.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "^5.0.1",
"karma-jasmine-html-reporter": "^2.0.0",
Expand Down
26 changes: 22 additions & 4 deletions projects/demo/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,8 +208,11 @@ <h4><b>based on <a href="https://github.com/Alberplz/angular2-color-picker">angu
<div class="col-md-5">
<input [style.background]="color10"
[cpColor]="color10"
(cpColorChange)="cmykColor=onChangeColorCmyk($event);color10=$event" />
[cpCmykEnabled]="true"
(cpCmykColorChange)="cmykValue=$event;cmykColor=onChangeColorCmyk($event)"
(cpColorChange)="color10=$event" />
<div class="clearfix"></div>
<div>{{cmykValue}}</div>
<div>
<span class="cmyk-text"
style="color: rgb(0,255,255);"
Expand All @@ -232,9 +235,11 @@ <h4><b>based on <a href="https://github.com/Alberplz/angular2-color-picker">angu
<p>Change event color:</p>
<div class="card">
<div class="card-body">
<pre><code>&lt;input [style.background]="color"
[cpColor]="color"
(cpColorChange)="cmykColor=onChangeColorCmyk($event);color=$event"/&gt;
<pre><code>&lt;input [style.background]="rgbColor"
[cpColor]="color"
[cpCmykEnabled]="true"
(cpCmykColorChange)="color=$event;cmykColor=onChangeColorCmyk($event)"
(cpColorChange)="rgbColor=$event"/&gt;
&lt;span [style.font-size.px]="100 * cmykColor.c"/&gt;C&lt;/span/&gt;
&lt;span [style.font-size.px]="100 * cmykColor.m"/&gt;M&lt;/span/&gt;
&lt;span [style.font-size.px]="100 * cmykColor.y"/&gt;Y&lt;/span/&gt;
Expand Down Expand Up @@ -468,6 +473,13 @@ <h4><b>based on <a href="https://github.com/Alberplz/angular2-color-picker">angu
Dialog color mode.
</td>
</tr>
<tr>
<td>cpCmykEnabled</td>
<td>
<b>false</b>, true<br>
Enable cmyk color mode.
</td>
</tr>
<tr>
<td>cpOutputFormat</td>
<td>
Expand Down Expand Up @@ -686,6 +698,12 @@ <h4><b>based on <a href="https://github.com/Alberplz/angular2-color-picker">angu
Changed color value, send when color is changed. <b>(value: string)</b>
</td>
</tr>
<tr>
<td>cpCmykColorChange</td>
<td>
Changed CMYK value, send when CMYK is enabled. <b>(value: string)</b>
</td>
</tr>
<tr>
<td>cpPresetColorsChange</td>
<td>
Expand Down
17 changes: 6 additions & 11 deletions projects/demo/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component } from '@angular/core'
import { Cmyk, formatOutput, hsvaToRgba, OutputFormat, rgbaToCmyk, stringToHsva } from 'nxt-color-picker'
import { Cmyk, formatOutput, OutputFormat, stringToCmyk, stringToHsva } from 'nxt-color-picker'

@Component({
selector: 'app-root',
Expand Down Expand Up @@ -40,7 +40,9 @@ export class AppComponent {
color17: string = '#666666'
color18: string = '#ff0000'

cmykColor: Cmyk = new Cmyk(0, 0, 0, 0)
cmykValue: string = ''

cmykColor: Cmyk = new Cmyk(0, 0, 0, 0, 1)

constructor() { }

Expand All @@ -49,15 +51,8 @@ export class AppComponent {
}

onChangeColorCmyk(color: string) {
const hsva = stringToHsva(color)

if (hsva) {
const rgba = hsvaToRgba(hsva)

return rgbaToCmyk(rgba)
}

return new Cmyk(0, 0, 0, 0)
const cmyk = stringToCmyk(color)
return cmyk || new Cmyk(0, 0, 0, 0, 1)
}

onChangeColorHex8(color: string) {
Expand Down
4 changes: 4 additions & 0 deletions projects/nxt-color-picker/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ import { ColorPickerModule } from 'nxt-color-picker';

[cpMode] // Dialog color mode: 'color', 'grayscale', 'presets' ('color').

[cpCmykEnabled] // Enables CMYK input format and color change event (false).

[cpOutputFormat] // Output color format: OutputFormat (OutputFormat.auto).
[cpAlphaChannel] // Alpha mode: AlphaChannel (AlphaChannel.enabled).
[cpFallbackColor] // Used when the color is not well-formed or is undefined ('#000').
Expand Down Expand Up @@ -117,6 +119,8 @@ import { ColorPickerModule } from 'nxt-color-picker';
(cpColorSelect) // Selected color value, send when OK button pressed or user clicks outside (if cpSaveClickOutside is true). (value: string).
(cpColorChange) // Changed color value, send when color is changed (value: string).

(cpCmykColorChange) // Outputs the color as CMYK string if CMYK is enabled (value: string).

(cpPresetColorsChange) // Preset colors, send when 'Add Color' button is pressed (value: array).
```

Expand Down
Loading

0 comments on commit 9435a69

Please sign in to comment.