color-util-helpers 1.0.4 → 1.0.7

package/README.md

@@ -8,6 +8,7 @@ This lib contains a variety of very useful color utils
 - Text Color - provides the color to use (you provide light and dark) based on color provided
 - Color Lighten Darken - Takes a color and you can darken or lighten
 - Generate Random Color - This function generates a random hue value between 0 and 360 degrees, and random saturation and lightness values between 50% and 100%.
+- Color Grabber - Directive when applied to a div will get the average color of the provided url of an image and then change the background color.
 
 ## Demo
 
@@ -32,6 +33,10 @@ npm install color-util-helpers
 
 ## Color Pallette Service and Directive
 
+### Usage
+
+Because this is a Directive - import the `ColorExtractorDirective`
+
 define image path
 
     this.colorSelectionService.getColorsFromImage('../assets/sample2.jpg')
@@ -123,3 +128,45 @@ This function takes a color '#3498db' and lightens the color by 20% and also dar
   console.log(lighterColor, darkerColor);
 ```
 
+# Color Grabber
+
+This Angular Directive when applied to a div will get the average color of the provided url of an image and then change the background color to that color. Any test inside the div will be colored white or black based on the average color of the image that best suites it.
+
+## Usage
+
+Because this is a Directive - import the `ColorUtilitiesModule`
+In the following example, the mat-card container has the `colorGrab` directive applied.
+
+The `[imageUrl]="image"` is the image to grab the color from.
+
+The `[light]="'#FFFFFF'"` is the light color to use if the average color is dark.
+The `[dark]="'#000000'"` is the dark color to use if the average color is light.
+
+The mat-card contaner background color will change to this color
+
+The Text inside this container will also change ether to black or white depending what suites best based on that colors image.
+
+To use in the directive, use the following
+
+```
+image = "https://picsum.photos/id/1/5616/3744"
+```
+
+```
+<mat-card style="margin: 8px;"
+  colorGrab [imageUrl]="image" [light]="'rgb(220, 220, 220)'" [dark]="'rgb(47, 79, 79)'"
+  class="box"
+  >
+    <h3>{{ item.author }}</h3>
+    <img [src]="image" width="160" height="120" style="object-fit: cover;">
+</mat-card>
+```
+
+## Paramiter
+
+> imageUrl - provide the full URL of the image (png, jpg) 
+
+```
+colorGrab [imageUrl]="item.download_url"
+```
+

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.4",
+  "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);
+  }
+
+}