color-util-helpers 1.0.6 → 1.0.7

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/color-utils",
+  "assets": ["./assets"],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "color-util-helpers",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "peerDependencies": {
     "@angular/common": "^15.2.0",
     "@angular/core": "^15.2.0"
@@ -8,18 +8,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/color-util-helpers.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/color-util-helpers.mjs",
-      "esm": "./esm2022/color-util-helpers.mjs",
-      "default": "./fesm2022/color-util-helpers.mjs"
-    }
-  }
+  "sideEffects": false
 }

package/src/lib/color-conversion.service.spec.ts

@@ -0,0 +1,54 @@
+import { TestBed } from '@angular/core/testing';
+import { ColorConversionService } from './color-conversion.service';
+
+describe('ColorConversionService', () => {
+  let service: ColorConversionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ColorConversionService);
+  });
+
+  describe('rgbToHex', () => {
+    it('should convert RGB to hex', () => {
+      expect(service.rgbToHex([255, 0, 0])).toBe('#ff0000');
+      expect(service.rgbToHex([0, 255, 0])).toBe('#00ff00');
+      expect(service.rgbToHex([0, 0, 255])).toBe('#0000ff');
+    });
+
+    it('should return empty string for null input', () => {
+      expect(service.rgbToHex(null)).toBe('');
+    });
+
+    it('should return empty string for empty array input', () => {
+      expect(service.rgbToHex([])).toBe('');
+    });
+
+    it('should handle invalid RGB values', () => {
+      expect(service.rgbToHex([256, -1, 300])).toBe('');
+      expect(service.rgbToHex([255, 255])).toBe('');
+      expect(service.rgbToHex([255, 255, 255, 255])).toBe('');
+    });
+  });
+
+  describe('hexToRgb', () => {
+    it('should convert hex to RGB', () => {
+      expect(service.hexToRgb('#ff0000')).toEqual([255, 0, 0]);
+      expect(service.hexToRgb('#00ff00')).toEqual([0, 255, 0]);
+      expect(service.hexToRgb('#0000ff')).toEqual([0, 0, 255]);
+    });
+
+    it('should return empty array for null input', () => {
+      expect(service.hexToRgb(null)).toEqual([]);
+    });
+
+    it('should return empty array for undefined input', () => {
+      expect(service.hexToRgb(undefined)).toEqual([]);
+    });
+
+    it('should return empty array for invalid hex values', () => {
+      expect(service.hexToRgb('#zzz')).toEqual([]);
+      expect(service.hexToRgb('#12345')).toEqual([]);
+    });
+  });
+});

package/src/lib/color-conversion.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ColorConversionService {
+
+  rgbToHex(rgb: number[] | null): string {
+    if (rgb === null || rgb.length !== 3 || rgb.some(value => value < 0 || value > 255)) return '';
+
+    const [r, g, b] = rgb;
+    const hexR = this.componentToHex(r);
+    const hexG = this.componentToHex(g);
+    const hexB = this.componentToHex(b);
+    return "#" + hexR + hexG + hexB;
+  }
+
+  private componentToHex = (c: number) => {
+    const hex = c.toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  }
+
+  hexToRgb(hex: string | null | undefined): number[] {
+    if (hex === null || hex === undefined) return [];
+
+    hex = (hex.length === 3) ? hex + hex : hex;
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+    return result ? [
+      parseInt(result[1], 16),
+      parseInt(result[2], 16),
+      parseInt(result[3], 16)
+    ] : [];
+  }
+}

package/src/lib/color-extractor.directive.spec.ts

@@ -0,0 +1,49 @@
+import { ColorExtractorDirective } from './color-extractor.directive';
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  template: `<div getColor (colorValue)="onColorChange($event)" style="background-color: red;"></div>`
+})
+class TestHostComponent {
+
+  color = ''
+
+  onColorChange(color: string) {
+    this.color = color;
+  }
+}
+
+describe('ColorExtractorDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let divEl: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ColorExtractorDirective, TestHostComponent]
+    });
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    divEl = fixture.debugElement.query(By.directive(ColorExtractorDirective));
+    fixture.detectChanges();
+  });
+
+  it('should create an instance', () => {
+    expect(divEl).toBeTruthy();
+  });
+
+  it('should emit background color on mouse enter', () => {
+    spyOn(fixture.componentInstance, 'onColorChange');
+    divEl.triggerEventHandler('mouseenter', null);
+    fixture.detectChanges();
+    expect(fixture.componentInstance.onColorChange).toHaveBeenCalled();
+  });
+
+  it('should emit white color on mouse leave', () => {
+    spyOn(fixture.componentInstance, 'onColorChange');
+    divEl.triggerEventHandler('mouseleave', null);
+    fixture.detectChanges();
+    expect(fixture.componentInstance.onColorChange).toHaveBeenCalledWith('white');
+  });
+});

package/src/lib/color-extractor.directive.ts

@@ -0,0 +1,28 @@
+import { Directive, ElementRef, Renderer2, HostListener, EventEmitter, Output } from '@angular/core';
+
+@Directive({
+  selector: '[getColor]'
+})
+export class ColorExtractorDirective {
+
+  @Output() colorValue: EventEmitter<string> = new EventEmitter<string>();
+
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
+
+  get currentElement() {
+    return window.getComputedStyle(this.elementRef.nativeElement);
+  }
+
+  @HostListener('mouseenter')
+  onMouseEnter() {
+    // console.log('ENTER', this.currentElement)
+    this.colorValue.emit(this.currentElement.getPropertyValue('background-color'))
+  }
+
+  @HostListener('mouseleave')
+  onMouseLeave() {
+    // console.log('LEAVE', this.currentElement.getPropertyValue('background-color'))
+    this.colorValue.emit('white')
+  }
+
+}

package/src/lib/color-grab.directive.ts

@@ -0,0 +1,204 @@
+import { Directive, ElementRef, Input, OnInit } from '@angular/core';
+
+@Directive({
+  selector: '[colorGrabber]'
+})
+export class ColorGrabberDirective implements OnInit {
+
+  ctx?: CanvasRenderingContext2D
+
+  @Input() imageUrl?: string
+  @Input() light?: string
+  @Input() dark?: string
+
+  constructor(private el: ElementRef) { }
+
+  ngOnInit() {
+
+    const canvas = document.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+
+    this.ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+    const img = new Image();
+    img.src = this.imageUrl || '';
+    img.setAttribute('crossOrigin', '');
+
+    img.onload = () => {
+      this.ctx?.drawImage(img, 0, 0, 1, 1);
+      const imageData = this.ctx?.getImageData(0, 0, 1, 1);
+
+      if (imageData && imageData.data) {
+        const i = imageData.data;
+
+        const rgbColor = `rgba(${i[0]},${i[1]},${i[2]},${i[3]})`;
+        const hexColor = "#" + ((1 << 24) + (i[0] << 16) + (i[1] << 8) + i[2]).toString(16).slice(1);
+
+        const textColor = this.textColorBasedOnBgColor(hexColor, this.light, this.dark);
+
+        const hsv = this.RGB2HSV({ r: i[0], g: i[1], b: i[2] });
+        hsv.hue = this.HueShift(hsv.hue, 135.0);
+
+        const secondaryColor = this.HSV2RGB(hsv);
+        const highlightColor = this.lightenDarkenColor(secondaryColor.hex, 50);
+
+        this.el.nativeElement.style.backgroundColor = rgbColor;
+        this.el.nativeElement.style.color = textColor;
+      } else {
+        console.error("Failed to get image data.");
+      }
+    };
+  }
+
+  textColorBasedOnBgColor(
+    bgColor: string,
+    lightColor: string = '#FFFFFF',
+    darkColor: string = '#000000'
+    ) {
+
+    const color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor
+
+    const r = parseInt(color.substring(0, 2), 16) // hexToR
+    const g = parseInt(color.substring(2, 4), 16) // hexToG
+    const b = parseInt(color.substring(4, 6), 16) // hexToB
+
+    const uicolors = [r / 255, g / 255, b / 255]
+
+    const c = uicolors.map((col) => {
+
+      if (col <= 0.03928) return col / 12.92
+      return Math.pow((col + 0.055) / 1.055, 2.4)
+
+    })
+
+    const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2])
+
+    return (L > 0.179) ? darkColor : lightColor
+
+  }
+
+  RGB2HSV(rgb: { r: any, g: any, b: any}) {
+
+    const hsv = { saturation:0, hue:0, value: 0 }
+
+    const max = this.max3(rgb.r,rgb.g,rgb.b)
+    const dif = max - this.min3(rgb.r,rgb.g,rgb.b)
+    hsv.saturation = (max==0.0)?0:(100*dif/max)
+
+    if (hsv.saturation == 0) {
+      hsv.hue=0
+    } else if (rgb.r == max) {
+      hsv.hue=60.0*(rgb.g-rgb.b)/dif
+    } else if (rgb.g == max) {
+      hsv.hue=120.0+60.0*(rgb.b-rgb.r)/dif
+    } else if (rgb.b == max) {
+      hsv.hue=240.0+60.0*(rgb.r-rgb.g)/dif
+    }
+
+    if (hsv.hue<0.0) hsv.hue+=360.0
+
+    hsv.value = Math.round(max*100/255)
+    hsv.hue = Math.round(hsv.hue)
+    hsv.saturation = Math.round(hsv.saturation)
+
+    return hsv
+  }
+
+  HSV2RGB(hsv: any) {
+
+    const rgb = { r: 0, g: 0, b: 0}
+
+    if (hsv.saturation==0) {
+      rgb.r = rgb.g = rgb.b = Math.round(hsv.value*2.55)
+    } else {
+
+      hsv.hue/=60
+      hsv.saturation/=100
+      hsv.value/=100
+      const i = Math.floor(hsv.hue)
+      const f = hsv.hue-i
+
+      const p = hsv.value*(1-hsv.saturation)
+      const q = hsv.value*(1-hsv.saturation*f)
+      const t = hsv.value*(1-hsv.saturation*(1-f))
+
+      switch(i) {
+
+      case 0: rgb.r=hsv.value; rgb.g=t; rgb.b=p; break
+      case 1: rgb.r=q; rgb.g=hsv.value; rgb.b=p; break
+      case 2: rgb.r=p; rgb.g=hsv.value; rgb.b=t; break
+      case 3: rgb.r=p; rgb.g=q; rgb.b=hsv.value; break
+      case 4: rgb.r=t; rgb.g=p; rgb.b=hsv.value; break
+
+      default: rgb.r=hsv.value; rgb.g=p; rgb.b=q
+
+      }
+
+      rgb.r = Math.round(rgb.r*255)
+      rgb.g = Math.round(rgb.g*255)
+      rgb.b = Math.round(rgb.b*255)
+
+    }
+
+    const rgbColor = `rgba(${rgb.r},${rgb.g},${rgb.b},${1})`
+    const hexColor = "#" + ((1 << 24) + (rgb.r << 16) + (rgb.g << 8) + rgb.b).toString(16).slice(1)
+
+    return { rgb: rgbColor, hex: hexColor }
+  }
+
+  HueShift(h: any, s: any) {
+    h += s
+    while (h>=360.0) h-=360.0
+    while (h<0.0) h+=360.0
+    return h
+  }
+
+  min3(a: any, b: any, c: any) {
+    return (a<b)?((a<c)?a:c):((b<c)?b:c)
+  }
+
+  max3(a: any, b: any, c: any) {
+    return (a>b)?((a>c)?a:c):((b>c)?b:c)
+  }
+
+  lightenDarkenColor(colorCode: any, amount: number) {
+
+    var usePound = false;
+
+    if (colorCode[0] == "#") {
+        colorCode = colorCode.slice(1);
+        usePound = true;
+    }
+
+    var num = parseInt(colorCode, 16);
+
+    var r = (num >> 16) + amount;
+
+    if (r > 255) {
+        r = 255;
+    } else if (r < 0) {
+        r = 0;
+    }
+
+    var b = ((num >> 8) & 0x00FF) + amount;
+
+    if (b > 255) {
+        b = 255;
+    } else if (b < 0) {
+        b = 0;
+    }
+
+    var g = (num & 0x0000FF) + amount;
+
+    if (g > 255) {
+        g = 255;
+    } else if (g < 0) {
+        g = 0;
+    }
+
+    return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16)
+
+  }
+
+}

package/src/lib/color-lighten-darken.service.spec.ts

@@ -0,0 +1,61 @@
+import { TestBed } from '@angular/core/testing';
+import { ColorLightenDarkenService } from './color-lighten-darken.service';
+import { TextColorService } from './text-color.service';
+
+describe('ColorLightenDarkenService', () => {
+  let service: ColorLightenDarkenService;
+  let textColorServiceSpy: jasmine.SpyObj<TextColorService>;
+
+  beforeEach(() => {
+    const spy = jasmine.createSpyObj('TextColorService', ['fixColor']);
+
+    TestBed.configureTestingModule({
+      providers: [
+        ColorLightenDarkenService,
+        { provide: TextColorService, useValue: spy }
+      ]
+    });
+    service = TestBed.inject(ColorLightenDarkenService);
+    textColorServiceSpy = TestBed.inject(TextColorService) as jasmine.SpyObj<TextColorService>;
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should lighten color by 20%', () => {
+    // Mocking fixColor to return RGB values
+    textColorServiceSpy.fixColor.and.returnValue([52, 152, 219]);
+
+    const result = service.lighten('#3498db', 0.2);
+    expect(result).toMatch(/#[0-9A-Fa-f]{6}/); // Check if it's a valid hex color
+    // Here we would typically validate the exact color, but due to rounding, exact match might be complex.
+    // Instead, we could check if it's lighter by comparing HSL values, but that's beyond simple testing.
+  });
+
+  it('should darken color by 20%', () => {
+    // Mocking fixColor to return RGB values
+    textColorServiceSpy.fixColor.and.returnValue([52, 152, 219]);
+
+    const result = service.darken('#3498db', 0.2);
+    expect(result).toMatch(/#[0-9A-Fa-f]{6}/); // Check if it's a valid hex color
+    // Similar to lighten, we would ideally check if it's darker, but exact match is complicated by rounding.
+  });
+
+  it('should not exceed lightness value of 1', () => {
+    // Test with an already light color to ensure it doesn't go over 100%
+    textColorServiceSpy.fixColor.and.returnValue([255, 255, 255]); // White
+
+    const result = service.lighten('#ffffff', 0.5);
+    expect(result).toBe('#ffffff'); // Should remain at maximum lightness
+  });
+
+  it('should handle negative amount in lighten to darken', () => {
+    // This tests if lighten with negative amount behaves like darken
+    textColorServiceSpy.fixColor.and.returnValue([52, 152, 219]);
+
+    const result = service.lighten('#3498db', -0.2);
+    const darkenResult = service.darken('#3498db', 0.2);
+    expect(result).toEqual(darkenResult);
+  });
+});

package/src/lib/color-lighten-darken.service.ts

@@ -0,0 +1,83 @@
+import { Injectable, inject } from '@angular/core';
+import { TextColorService } from './text-color.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ColorLightenDarkenService {
+
+  colors = inject(TextColorService)
+
+  // const color = '#3498db'; // Your color
+  // const lighterColor = lighten(color, 0.2); // 20% lighter
+  // const darkerColor = darken(color, 0.2);   // 20% darker
+
+  // console.log(lighterColor, darkerColor);
+
+constructor() { }
+
+  lighten(color: string, amount: number) {
+
+    const rgb = this.colors.fixColor(color)
+    // const rgb = color.match(/\w\w/g)?.map((x) => parseInt(x, 16)) || [];
+
+    // Convert RGB to HSL
+    let [r, g, b] = rgb.map((c) => c / 255);
+    const max = Math.max(r, g, b),
+      min = Math.min(r, g, b);
+    let h = 0,
+      s = 0,
+      l = (max + min) / 2;
+
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = (g - b) / d + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / d + 2;
+          break;
+        case b:
+          h = (r - g) / d + 4;
+          break;
+      }
+      h /= 6;
+    }
+
+    // Modify the lightness and clamp it to [0, 1]
+    l = Math.min(1, l + amount);
+
+    // Convert HSL back to RGB
+    if (s === 0) {
+      r = g = b = l; // achromatic
+    } else {
+      const hue2rgb = (p: number, q: number, t: number) => {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1 / 6) return p + (q - p) * 6 * t;
+        if (t < 1 / 2) return q;
+        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+      };
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1 / 3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1 / 3);
+    }
+
+    // Convert RGB back to hexadecimal color
+    const toHex = (x: number) =>
+      Math.round(x * 255)
+        .toString(16)
+        .padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  }
+
+  darken(color: string, amount: number) {
+    return this.lighten(color, -amount);
+  }
+
+}

package/src/lib/color-pallette.service.spec.ts

@@ -0,0 +1,85 @@
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ColorPalletteService } from './color-pallette.service';
+import { BehaviorSubject } from 'rxjs';
+import { ColorConversionService } from './color-conversion.service';
+
+describe('ColorPalletteService', () => {
+  let service: ColorPalletteService;
+  let palletteBehaviorMock: jasmine.SpyObj<BehaviorSubject<{ color: string, complementaryColor: string }[]>>;
+  let colorConversionService: jasmine.SpyObj<ColorConversionService>;
+
+  beforeEach(() => {
+    const colorConversionServiceSpy = jasmine.createSpyObj('ColorConversionService', ['rgbToHex', 'hexToRgb']);
+    palletteBehaviorMock = jasmine.createSpyObj('BehaviorSubject', ['next', 'subscribe']);
+    TestBed.configureTestingModule({
+      providers: [ColorPalletteService,
+        {
+          provide: BehaviorSubject,
+          useValue: palletteBehaviorMock
+        },
+        {
+          provide: ColorConversionService,
+          useValue: colorConversionServiceSpy
+        }
+      ]
+    });
+    service = TestBed.inject(ColorPalletteService);
+    colorConversionService = TestBed.inject(ColorConversionService) as jasmine.SpyObj<ColorConversionService>;
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should handle null context gracefully', fakeAsync(() => {
+    const image = new Image();
+    const colorCount = 5;
+    service.getColorsFromImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAwAB/gbKkAAAAABJRU5ErkJggg==');
+
+    image.onload = () => {
+      // Mock the canvas context to return null
+      const canvas = document.createElement('canvas');
+      spyOn(canvas, 'getContext').and.returnValue(null);
+      spyOn(document, 'createElement').and.returnValue(canvas);
+      const palette = service.generateColorPalette(image, colorCount);
+      expect(palette).toBeUndefined();
+    };
+    tick(1000);
+
+    // Trigger the image load
+    image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAwAB/gbKkAAAAABJRU5ErkJggg==';
+  }));
+
+  it('should quantize colors using k-means', () => {
+    const colors = [[255, 0, 0], [0, 255, 0], [0, 0, 255]];
+    const colorCount = 5;
+    const quantizedColors = (service as any).kMeansColorQuantization(colors, colorCount);
+    expect(quantizedColors.length).toEqual(5);
+  });
+
+  it('should sort colors by luminance', () => {
+    const colors = [[255, 0, 0], [0, 255, 0], [0, 0, 255]];
+    colors.sort((color1, color2) => {
+      const luminance1 = (service as any).getLuminance(color1);
+      const luminance2 = (service as any).getLuminance(color2);
+      return luminance2 - luminance1;
+    });
+    expect(colors[0]).toEqual([0, 255, 0]);
+  });
+
+  it('should call the color conversion service', () => {
+    const color = [255, 0, 0];
+    const hexColor = '#FF0000';
+    colorConversionService.rgbToHex.and.returnValue(hexColor);
+    const result = colorConversionService.rgbToHex(color);
+    expect(result).toEqual(hexColor);
+  });
+
+  it('should call behavior subject next', () => {
+    const data = [{ color: '#FF0000', complementaryColor: '#00FF00' }];
+
+    (service as any).palette = palletteBehaviorMock;
+    (service as any).palette.next(data);
+    expect(palletteBehaviorMock.next).toHaveBeenCalledWith(data);
+  });
+});