"use strict";
const loadImage = (base64) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = base64;
    img.onload = () => resolve(img);
    img.onerror = () => resolve(null);
  });
};
function hex(n) {
  return `0${n.toString(16)}`.slice(-2);
}
const rbgaObjToHex = (rgba) => {
  let { r, g, b } = rgba;
  const { a } = rgba;
  r = Math.floor(r * a);
  g = Math.floor(g * a);
  b = Math.floor(b * a);
  return `#${hex(r)}${hex(g)}${hex(b)}`;
};
const rbgaObjToRgba = (rgba) => {
  const { r, g, b, a } = rgba;
  return `rgba(${r},${g},${b},${a})`;
};
const renderColorInfo = (params) => {
  const { containerDom, color, colors, point } = params;
  let container = containerDom;
  const pos = point;
  const n = 7;
  const count = colors[0].length;
  const size = count * (n + 0) + 2;
  if (!container) {
    const magnifier = document.createElement("div");
    container = magnifier;
  }
  if (pos.x + size + 25 > window.innerWidth) {
    pos.x -= size + 25;
  }
  if (pos.y + size + 40 > window.innerHeight) {
    pos.y -= size + 40;
  }
  container.style = `
    position: fixed;
    left: ${pos.x + 5}px;
    top: ${pos.y}px;
    z-index: 10001;
    pointer-events: none;
  `;
  container.innerHTML = "";
  const pipette = drawPipette(colors, n);
  const colorBlock = drawColorBlock(color);
  const padding = document.createElement("div");
  padding.style = "height: 3px;";
  container.appendChild(pipette);
  container.appendChild(padding);
  container.appendChild(colorBlock);
  return container;
};
function drawPipette(colors, size = 8) {
  const scale = 2;
  const canvasContainer = document.createElement("div");
  const canvasContent = document.createElement("div");
  const pipetteCanvas = drawPipetteCanvas(colors, size);
  canvasContainer.style = `position: relative;`;
  canvasContent.style = `
    position: absolute;
    top: 0;
    left: 0;
    width: ${pipetteCanvas.width / scale}px;
    height: ${pipetteCanvas.height / scale}px;
    border-radius: 50%;
    box-shadow: 0 0 10px 10px rgba(150,150,150,0.2) inset;
  `;
  canvasContainer.appendChild(pipetteCanvas);
  canvasContainer.appendChild(canvasContent);
  return canvasContainer;
}
function drawColorBlock(color) {
  const colorBlock = document.createElement("div");
  colorBlock.style = `
    display: flex;
    align-items: center;
    background-color: rgba(0,0,0,0.4);
    padding: 2px 4px;
    border-radius: 3px;
  `;
  colorBlock.innerHTML = `
    <div style="
      width: 20px;
      height: 20px;
      background-color: ${color};
      border-radius: 3px;
      border: 1px solid #eee;
    "></div>
    <div style="
      width: 65px;
      border-radius: 3px;
      color: #fff;
      margin-left: 4px;
    ">${color}</div>
  `;
  return colorBlock;
}
function drawTooltip(content, tooltipVisible = true) {
  const tooltip = document.createElement("div");
  tooltip.id = "color-pipette-tooltip-container";
  tooltip.innerHTML = content;
  tooltip.style = `
    position: fixed;
    left: 50%;
    top: 30%;
    z-index: 10002;
    display: ${tooltipVisible ? "flex" : "none"};
    align-items: center;
    background-color: rgba(0,0,0,0.4);
    padding: 4px 10px;
    border-radius: 3px;
    color: #fff;
    font-size: 20px;
    pointer-events: none;
  `;
  return tooltip;
}
function drawPipetteCanvas(colors, size) {
  const count = colors.length;
  const diameter = size * count;
  const radius = diameter / 2;
  const { canvas, ctx } = getCanvas({
    width: diameter,
    height: diameter,
    scale: 2,
    attrs: {
      style: `border-radius: 50%;`
    }
  });
  if (!ctx) {
    return;
  }
  colors.forEach(
    (row, i) => row.forEach((color, j) => {
      ctx.fillStyle = color;
      ctx.fillRect(j * size, i * size, size, size);
    })
  );
  for (let i = 0; i < count; i += 1) {
    ctx.beginPath();
    ctx.strokeStyle = "#eee";
    ctx.lineWidth = 0.6;
    ctx.moveTo(0, i * size);
    ctx.lineTo(diameter, i * size);
    ctx.stroke();
  }
  for (let j = 0; j < count; j += 1) {
    ctx.beginPath();
    ctx.strokeStyle = "#eee";
    ctx.lineWidth = 0.6;
    ctx.moveTo(j * size, 0);
    ctx.lineTo(j * size, diameter);
    ctx.stroke();
  }
  ctx.beginPath();
  ctx.strokeStyle = "#ddd";
  ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.strokeStyle = "#000";
  ctx.lineWidth = 1;
  ctx.strokeRect(radius - size / 2, radius - size / 2, size, size);
  return canvas;
}
function getCanvas({
  width = 0,
  height = 0,
  scale = 1,
  attrs = {}
}) {
  const canvas = document.createElement("canvas");
  Object.keys(attrs).forEach((key) => {
    const value = attrs[key];
    canvas.setAttribute(key, value);
  });
  canvas.setAttribute("width", `${width * scale}`);
  canvas.setAttribute("height", `${height * scale}`);
  canvas.style = `${attrs.style || ""};width: ${width}px;height: ${height}px;`;
  const ctx = canvas.getContext("2d", { willReadFrequently: true });
  ctx?.scale(scale, scale);
  return { canvas, ctx };
}
const getImageColor = (data, rect, scale = 1) => {
  const colors = [];
  const { width, height } = rect;
  for (let row = 0; row < height; row += 1) {
    if (!colors[row]) {
      colors[row] = [];
    }
    const startIndex = row * width * 4 * scale * scale;
    for (let column = 0; column < width; column += 1) {
      const i = startIndex + column * 4 * scale;
      const r = data[i];
      const g = data[i + 1];
      const b = data[i + 2];
      const a = data[i + 3] / 255;
      const color = rbgaObjToHex({ r, g, b, a });
      colors[row][column] = color;
    }
  }
  return colors;
};
const getCanvasRectColor = (ctx, rect, scale = 1) => {
  const { x, y, width, height } = rect;
  const image = ctx.getImageData(
    x * scale,
    y * scale,
    width * scale,
    height * scale
  );
  const { data } = image;
  const colors = getImageColor(data, rect, scale);
  return colors;
};
const formatColor = (hexColor, colorFormat) => {
  if (colorFormat === "hex") {
    return hexColor;
  }
  const rgba = hexToRgba(hexColor);
  switch (colorFormat) {
    case "rgb":
      return `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})`;
    case "rgba":
      return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a.toFixed(2)})`;
    case "hsl":
      const hsl = rgbaToHsl(rgba);
      return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
    case "hsv":
      const hsv = rgbaToHsv(rgba);
      return `hsv(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`;
    default:
      return hexColor;
  }
};
const hexToRgba = (hex2) => {
  hex2 = hex2.replace("#", "");
  let r, g, b, a = 1;
  if (hex2.length === 8) {
    r = parseInt(hex2.slice(0, 2), 16);
    g = parseInt(hex2.slice(2, 4), 16);
    b = parseInt(hex2.slice(4, 6), 16);
    a = parseInt(hex2.slice(6, 8), 16) / 255;
  } else if (hex2.length === 6) {
    r = parseInt(hex2.slice(0, 2), 16);
    g = parseInt(hex2.slice(2, 4), 16);
    b = parseInt(hex2.slice(4, 6), 16);
  } else if (hex2.length === 3) {
    r = parseInt(hex2[0] + hex2[0], 16);
    g = parseInt(hex2[1] + hex2[1], 16);
    b = parseInt(hex2[2] + hex2[2], 16);
  } else {
    r = g = b = 0;
  }
  return { r, g, b, a };
};
const rgbaToHsl = (rgba) => {
  const r = rgba.r / 255;
  const g = rgba.g / 255;
  const b = rgba.b / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s;
  const l = (max + min) / 2;
  if (max === min) {
    h = s = 0;
  } else {
    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;
      default:
        h = 0;
        break;
    }
    h /= 6;
  }
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
};
const rgbaToHsv = (rgba) => {
  const r = rgba.r / 255;
  const g = rgba.g / 255;
  const b = rgba.b / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s;
  const v = max;
  const d = max - min;
  s = max === 0 ? 0 : d / max;
  if (max === min) {
    h = 0;
  } else {
    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;
      default:
        h = 0;
        break;
    }
    h /= 6;
  }
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    v: Math.round(v * 100)
  };
};

export { drawColorBlock, drawPipette, drawPipetteCanvas, drawTooltip, formatColor, getCanvas, getCanvasRectColor, hex, hexToRgba, loadImage, rbgaObjToHex, rbgaObjToRgba, renderColorInfo, rgbaToHsl, rgbaToHsv };
//# sourceMappingURL=utils.mjs.map
