color-util-helpers 1.0.7 → 1.0.10

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

@@ -1,204 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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);
-  });
-});

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

@@ -1,191 +0,0 @@
-import { Injectable } from '@angular/core'
-import { BehaviorSubject } from 'rxjs'
-import { ColorConversionService } from './color-conversion.service'
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ColorPalletteService {
-
-  // define image path
-  // this.colorSelectionService.getColorsFromImage('../assets/sample2.jpg')
-
-  // get colors
-  // this.colorSelectionService.palette.subscribe(data => this.palette = data)
-
-  // sample html
-  //   <div *ngFor="let color of palette">
-  //     <div style="display: flex;">
-  //         <div
-  //             class="box"
-  //             [style.background-color]="color.color"
-  //         >
-  //         Color
-  //         </div>
-  //         <div
-  //             class="box"
-  //             [style.background-color]="color.complementaryColor"
-  //         >
-  //         Complementary
-  //         </div>
-  //     </div>
-  // </div>
-
-  // CSS
-  //   .box {
-  //     width: 100px;
-  //     height: 100px;
-  //     border: solid thin black;
-  //     color: black;
-  //     margin: 4px;
-  //     padding: 16px;
-  //     display: flex;
-  //     flex-wrap: wrap;
-  //     align-content: center;
-  //     justify-content: center;
-  // }
-
-  private palette = new BehaviorSubject<{ color: string, complementaryColor: string }[]>([])
-  palette$ = this.palette.asObservable()
-
-  constructor(
-    private colorConversionService: ColorConversionService
-  ) { }
-
-  /**
-   * Retrieves a color palette from an image at the specified path.
-   *
-   * @param imagePath - The path to the image to extract the color palette from.
-   * @param colors - The number of colors to include in the palette (default is 3).
-   * @returns An observable that emits the generated color palette.
-   */
-  getColorsFromImage(imagePath: string, colors = 3) {
-    const image = new Image();
-    image.src = imagePath;
-
-    image.onload = () => {
-      const data = this.generateColorPalette(image, colors) || [];
-      this.palette.next(data);
-    };
-  }
-
-  /**
-   * Generates a color palette from an image.
-   *
-   * @param image - The HTML image element to extract the color palette from.
-   * @param colorCount - The number of colors to include in the palette (default is 6).
-   * @returns An array of color objects, each with a hex color and a complementary hex color.
-   */
-  generateColorPalette(image: HTMLImageElement, colorCount = 6) {
-    const canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
-
-    if (!context) return;
-
-    canvas.width = image.width;
-    canvas.height = image.height;
-    context.drawImage(image, 0, 0);
-
-    // Get the image data
-    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-    const pixels = imageData.data;
-    const pixelCount = imageData.width * imageData.height;
-
-    // Build an array of RGB colors
-    const colors = [];
-    for (let i = 0; i < pixelCount; i++) {
-      const offset = i * 4;
-      const r = pixels[offset];
-      const g = pixels[offset + 1];
-      const b = pixels[offset + 2];
-      colors.push([r, g, b]);
-    }
-
-    // Apply color quantization using k-means clustering
-    const quantizedColors = this.kMeansColorQuantization(colors, colorCount);
-
-    // Order colors by luminance
-    quantizedColors.sort((color1, color2) => {
-      const luminance1 = this.getLuminance(color1);
-      const luminance2 = this.getLuminance(color2);
-      return luminance2 - luminance1;
-    });
-
-    const palette = quantizedColors.map((color) => {
-      const complementaryColor = color.map((component) => 255 - component);
-      const hexColor = this.colorConversionService.rgbToHex(color);
-      const hexComplementaryColor =
-        this.colorConversionService.rgbToHex(complementaryColor);
-      return { color: hexColor, complementaryColor: hexComplementaryColor };
-    });
-
-    return palette;
-  }
-
-  private getLuminance(color: number[]) {
-    const [r, g, b] = color
-    return 0.299 * r + 0.587 * g + 0.114 * b
-  }
-
-  private calculateColorDistance(color1: number[], color2: number[]) {
-    const [r1, g1, b1] = color1
-    const [r2, g2, b2] = color2
-    const dr = r2 - r1
-    const dg = g2 - g1
-    const db = b2 - b1
-    return Math.sqrt(dr * dr + dg * dg + db * db)
-  }
-
-  private calculateMeanColor(colors: number[][]) {
-    let sumR = 0
-    let sumG = 0
-    let sumB = 0
-    for (let i = 0; i < colors.length; i++) {
-      const [r, g, b] = colors[i]
-      sumR += r
-      sumG += g
-      sumB += b
-    }
-    const meanR = Math.round(sumR / colors.length)
-    const meanG = Math.round(sumG / colors.length)
-    const meanB = Math.round(sumB / colors.length)
-    return [meanR, meanG, meanB]
-  }
-
-  private kMeansColorQuantization(colors: number[][], k: number) {
-    let clusterCenters = []
-    for (let i = 0; i < k; i++) {
-      const randomColor = colors[Math.floor(Math.random() * colors.length)]
-      clusterCenters.push(randomColor)
-    }
-
-    let clusters = []
-    for (let i = 0; i < colors.length; i++) {
-      const color = colors[i]
-      let minDistance = Infinity
-      let nearestCenter = null
-      for (let j = 0; j < clusterCenters.length; j++) {
-        const center = clusterCenters[j]
-        const distance = this.calculateColorDistance(color, center)
-        if (distance < minDistance) {
-          minDistance = distance
-          nearestCenter = center
-        }
-      }
-      clusters.push({ color, center: nearestCenter })
-    }
-
-    let updatedCenters = []
-    for (let i = 0; i < clusterCenters.length; i++) {
-      const center = clusterCenters[i]
-      const clusterColors = clusters.filter(c => c.center === center).map(c => c.color)
-      if (clusterColors.length > 0) {
-        const updatedCenter = this.calculateMeanColor(clusterColors)
-        updatedCenters.push(updatedCenter)
-      }
-    }
-
-    return updatedCenters
-  }
-
-}