import { toPng } from '../../../../../../node_modules/.pnpm/html-to-image@1.11.13/node_modules/html-to-image/es/index.mjs';
import { renderColorInfo, getCanvas, drawTooltip, loadImage, getCanvasRectColor, formatColor, rbgaObjToHex } from './utils.mjs';
import './types.mjs';

"use strict";
class ColorPipette {
  constructor(props) {
    this.container = {};
    this.listener = {};
    this.rect = { x: 0, y: 0, width: 0, height: 0 };
    this.canvas = {};
    this.scale = 1;
    this.magnifier = null;
    this.colorContainer = null;
    this.colors = [];
    this.tooltipVisible = true;
    this.useMagnifier = false;
    this.colorFormat = "hex";
    /**
     * 处理鼠标移动
     */
    this.handleMove = (e) => {
      const { color, colors } = this.getPointColors(e);
      const { onChange = () => "" } = this.listener;
      const point = { x: e.pageX + 15, y: e.pageY + 15 };
      const colorContainer = renderColorInfo({
        containerDom: this.colorContainer,
        color,
        colors,
        point,
        colorFormat: this.colorFormat
      });
      if (!this.colorContainer) {
        this.colorContainer = colorContainer;
        document.body.appendChild(colorContainer);
      }
      onChange({ color, colors });
    };
    /**
     * 处理鼠标按下
     */
    this.handleDown = (e) => {
      const { onOk = () => "" } = this.listener;
      const res = this.getPointColors(e);
      onOk(res);
      this.destroy();
    };
    /**
     * 处理键盘按下Esc退出拾色
     */
    this.handleKeyDown = (e) => {
      if (e.code === "Escape") {
        this.destroy();
      }
    };
    try {
      const {
        container,
        listener,
        scale = 1,
        useMagnifier = false,
        colorFormat = "hex"
      } = props;
      this.container = container || document.body;
      this.listener = listener || {};
      this.rect = this.container.getBoundingClientRect();
      this.scale = scale > 4 ? 4 : scale;
      this.useMagnifier = useMagnifier;
      this.colorFormat = colorFormat;
      const noscript = document.body.querySelector("noscript");
      noscript?.parentNode?.removeChild(noscript);
      this.initCanvas();
    } catch (err) {
      console.error(err);
      this.destroy();
    }
  }
  /**
   * 初始化canvas
   */
  initCanvas() {
    const { rect, scale } = this;
    const { x, y, width, height } = rect;
    const { canvas, ctx } = getCanvas({
      width: rect.width,
      height: rect.height,
      scale,
      attrs: {
        class: "color-pipette-canvas-container",
        style: `
          position: fixed;
          left: ${x}px;
          top: ${y}px;
          z-index: 10000;
          cursor: pointer;
          width: ${width}px;
          height: ${height}px;
        `
      }
    });
    this.canvas = canvas;
    this.ctx = ctx;
  }
  /**
   * 开始
   */
  async start() {
    try {
      await this.drawCanvas();
      document.body.appendChild(this.canvas);
      const tooltip = drawTooltip("\u6309Esc\u53EF\u9000\u51FA");
      document.body.appendChild(tooltip);
      setTimeout(() => tooltip?.parentNode?.removeChild(tooltip), 2e3);
      this.canvas.addEventListener("mousemove", this.handleMove);
      this.canvas.addEventListener("mousedown", this.handleDown);
      document.addEventListener("keydown", this.handleKeyDown);
    } catch (err) {
      console.error(err);
      this.destroy();
    }
  }
  /**
   * 结束销毁dom，清除事件监听
   */
  destroy() {
    this.canvas.removeEventListener("mousemove", this.handleMove);
    this.canvas.removeEventListener("mousedown", this.handleDown);
    document.removeEventListener("keydown", this.handleKeyDown);
    this.canvas?.parentNode?.removeChild(this.canvas);
    this.colorContainer?.parentNode?.removeChild(this.colorContainer);
    this.colorContainer = null;
  }
  /**
   * 将dom节点画到canvas里
   */
  async drawCanvas() {
    const base64 = await toPng(this.container, { quality: 1 }).catch(() => "");
    if (!base64) {
      return;
    }
    const img = await loadImage(base64);
    if (!img) {
      return;
    }
    this.ctx.drawImage(img, 0, 0, this.rect.width, this.rect.height);
  }
  /**
   * 获取鼠标点周围的颜色整列
   */
  getPointColors(e) {
    const { ctx, rect, scale } = this;
    let { pageX: x, pageY: y } = e;
    x -= rect.x;
    y -= rect.y;
    const color = this.getPointColor(x, y);
    const size = 19;
    const half = Math.floor(size / 2);
    const info = { x: x - half, y: y - half, width: size, height: size };
    const colors = getCanvasRectColor(ctx, info, scale);
    const formattedColor = formatColor(color, this.colorFormat);
    const formattedColors = colors.map(
      (row) => row.map((cellColor) => formatColor(cellColor, this.colorFormat))
    );
    return { color: formattedColor, colors: formattedColors };
  }
  /**
   * 获取鼠标点的颜色
   */
  getPointColor(x, y) {
    const { scale } = this;
    const { data } = this.ctx.getImageData(x * scale, y * scale, 1, 1);
    const r = data[0];
    const g = data[1];
    const b = data[2];
    const a = data[3] / 255;
    const rgba = { r, g, b, a };
    return rbgaObjToHex(rgba);
  }
  /**
   * 设置颜色格式
   */
  setColorFormat(format) {
    this.colorFormat = format;
  }
}

export { ColorPipette as default };
//# sourceMappingURL=index.mjs.map
