@inweb/markup/src/markup/Konva/MarkupColor.ts

JavaScript 2D markups

///////////////////////////////////////////////////////////////////////////////
// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
// All rights reserved.
//
// This software and its documentation and related materials are owned by
// the Alliance. The software may only be incorporated into application
// programs owned by members of the Alliance, subject to a signed
// Membership Agreement and Supplemental Software License Agreement with the
// Alliance. The structure and organization of this software are the valuable
// trade secrets of the Alliance and its suppliers. The software is also
// protected by copyright law and international treaty provisions. Application
// programs incorporating this software must include the following statement
// with their copyright notices:
//
//   This application incorporates Open Design Alliance software pursuant to a
//   license agreement with Open Design Alliance.
//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
//   All rights reserved.
//
// By use of this software, its documentation or related materials, you
// acknowledge and accept the above terms.
///////////////////////////////////////////////////////////////////////////////

/**
 * Defines the markup color helper object.
 */
export class MarkupColor {
  public R: number;
  public G: number;
  public B: number;
  public HEX: string;

  /**
   * Creates an instance of the color.
   *
   * @param r - The `red` component of the color, as a number between 0 and 255.
   * @param g - The `green` component of the color, as a number between 0 and 255.
   * @param b - The `blue` component of the color, as a number between 0 and 255.
   */
  constructor(r: number, g: number, b: number) {
    this.setColor(r, g, b);
  }

  /**
   * Returns the color as a string in hexadecimal color syntax `#RGB` using its primary color components
   * (red, green, blue) written as hexadecimal numbers.
   */
  public asHex(): string {
    return "#" + this.HEX;
  }

  /**
   * Returns the color as an {r, g, b} object.
   */
  public asRGB(): { r: number; g: number; b: number } {
    return { r: this.R, g: this.G, b: this.B };
  }

  /**
   * Sets the color.
   *
   * @param r - The `red` component of the color, as a number between 0 and 255.
   * @param g - The `green` component of the color, as a number between 0 and 255.
   * @param b - The `blue` component of the color, as a number between 0 and 255.
   */
  public setColor(r: number, g: number, b: number): void {
    this.R = r;
    this.G = g;
    this.B = b;
    this.HEX = this.rgbToHex(r, g, b);
  }

  private rgbToHex(r: number, g: number, b: number): string {
    const valueToHex = (c: number) => {
      const hex = c.toString(16);
      return hex === "0" ? "00" : hex;
    };

    return valueToHex(r) + valueToHex(g) + valueToHex(b);
  }
}