From f433cf22f55fb26d6ff5f8d04e72035c21c45d52 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Sun, 23 Jun 2019 10:33:43 +0200 Subject: [PATCH] Random color. --- .../workflows/workflow-step.component.html | 20 +++- .../workflows/workflow-step.component.scss | 15 ++- .../workflows/workflows-page.component.ts | 7 +- .../forms/editable-title.component.html | 2 +- .../app/framework/utils/math-helper.spec.ts | 54 +++++++++++ .../app/framework/utils/math-helper.ts | 92 ++++++++++++++----- 6 files changed, 158 insertions(+), 32 deletions(-) diff --git a/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.html b/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.html index 70f05540d..113668ae0 100644 --- a/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.html +++ b/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.html @@ -15,6 +15,9 @@ [disabled]="step.isLocked"> +
+ (Cannot be removed) +
+
+ for +
+
+ +
diff --git a/src/Squidex/app/framework/utils/math-helper.spec.ts b/src/Squidex/app/framework/utils/math-helper.spec.ts index 8c4fbde93..4d584cb3f 100644 --- a/src/Squidex/app/framework/utils/math-helper.spec.ts +++ b/src/Squidex/app/framework/utils/math-helper.spec.ts @@ -108,6 +108,54 @@ describe('MathHelper', () => { expect(color.a).toBe(0.5); }); + it('should convert from hsv with red', () => { + const color = MathHelper.colorFromHsv(0, 1, 1); + + expect(color.r).toBe(1); + expect(color.g).toBe(0); + expect(color.b).toBe(0); + }); + + it('should convert from hsv with yellow', () => { + const color = MathHelper.colorFromHsv(60, 1, 1); + + expect(color.r).toBe(1); + expect(color.g).toBe(1); + expect(color.b).toBe(0); + }); + + it('should convert from hsv with blue', () => { + const color = MathHelper.colorFromHsv(120, 1, 1); + + expect(color.r).toBe(0); + expect(color.g).toBe(1); + expect(color.b).toBe(0); + }); + + it('should convert from hsv with turkis', () => { + const color = MathHelper.colorFromHsv(180, 1, 1); + + expect(color.r).toBe(0); + expect(color.g).toBe(1); + expect(color.b).toBe(1); + }); + + it('should convert from hsv with red', () => { + const color = MathHelper.colorFromHsv(240, 1, 1); + + expect(color.r).toBe(0); + expect(color.g).toBe(0); + expect(color.b).toBe(1); + }); + + it('should convert from hsv with pink', () => { + const color = MathHelper.colorFromHsv(300, 1, 1); + + expect(color.r).toBe(1); + expect(color.g).toBe(0); + expect(color.b).toBe(1); + }); + it('should convert to luminance', () => { expect(MathHelper.toLuminance(undefined!)).toBe(1); @@ -116,4 +164,10 @@ describe('MathHelper', () => { expect(MathHelper.toLuminance({ r: 0.5, g: 0.5, b: 0.5, a: 1 })).toBe(0.5); }); + + it('should generate random color', () => { + const color = MathHelper.randomColor(); + + expect(color[0]).toEqual('#'); + }); }); diff --git a/src/Squidex/app/framework/utils/math-helper.ts b/src/Squidex/app/framework/utils/math-helper.ts index 419464081..0d733aa20 100644 --- a/src/Squidex/app/framework/utils/math-helper.ts +++ b/src/Squidex/app/framework/utils/math-helper.ts @@ -26,42 +26,35 @@ const ColorDefinitions: IColorDefinition[] = [ { regex: /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*([\d\.]{1,})\)$/, process: (bits) => { - return { - r: parseInt(bits[1], 10) / 255, - g: parseInt(bits[2], 10) / 255, - b: parseInt(bits[3], 10) / 255, - a: parseFloat(bits[4]) - }; + return createColor( + parseInt(bits[1], 10) / 255, + parseInt(bits[2], 10) / 255, + parseInt(bits[3], 10) / 255, + parseFloat(bits[4])); } }, { regex: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/, process: (bits) => { - return { - r: parseInt(bits[1], 10) / 255, - g: parseInt(bits[2], 10) / 255, - b: parseInt(bits[3], 10) / 255, - a: 1 - }; + return createColor( + parseInt(bits[1], 10) / 255, + parseInt(bits[2], 10) / 255, + parseInt(bits[3], 10) / 255); } }, { regex: /^(\w{2})(\w{2})(\w{2})$/, process: (bits) => { - return { - r: parseInt(bits[1], 16) / 255, - g: parseInt(bits[2], 16) / 255, - b: parseInt(bits[3], 16) / 255, - a: 1 - }; + return createColor( + parseInt(bits[1], 16) / 255, + parseInt(bits[2], 16) / 255, + parseInt(bits[3], 16) / 255); } }, { regex: /^(\w{1})(\w{1})(\w{1})$/, process: (bits) => { - return { - r: parseInt(bits[1] + bits[1], 16) / 255, - g: parseInt(bits[2] + bits[2], 16) / 255, - b: parseInt(bits[3] + bits[3], 16) / 255, - a: 1 - }; + return createColor( + parseInt(bits[1] + bits[1], 16) / 255, + parseInt(bits[2] + bits[2], 16) / 255, + parseInt(bits[3] + bits[3], 16) / 255); } } ]; @@ -165,6 +158,53 @@ export module MathHelper { return undefined; } + export function randomColor() { + return colorToString(colorFromHsv(Math.random() * 360, .9, .9)); + } + + export function colorToString(color: Color): string { + let r = Math.round(color.r * 255).toString(16); + let g = Math.round(color.g * 255).toString(16); + let b = Math.round(color.b * 255).toString(16); + + if (r.length === 1) { + r = '0' + r; + } + if (g.length === 1) { + g = '0' + g; + } + if (b.length === 1) { + b = '0' + b; + } + + return '#' + r + g + b; + } + + export function colorFromHsv(h: number, s: number, v: number): Color { + const hi = Math.floor(h / 60) % 6; + + const f = (h / 60) - Math.floor(h / 60); + + const p = (v * (1 - s)); + const q = (v * (1 - (f * s))); + const t = (v * (1 - ((1 - f) * s))); + + switch (hi) { + case 0: + return createColor(v, t, p); + case 1: + return createColor(q, v, p); + case 2: + return createColor(p, v, t); + case 3: + return createColor(p, q, v); + case 4: + return createColor(t, p, v); + default: + return createColor(v, p, q); + } + } + export function toLuminance(color: Color) { if (!color) { return 1; @@ -172,4 +212,8 @@ export module MathHelper { return (0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b) / color.a; } +} + +export function createColor(r: number, g: number, b: number, a = 1) { + return { r, g, b, a }; } \ No newline at end of file