Pien-Studio/apps/web/lib/brush-painter.ts

export type BrushOptions = {
  color: string;
  size: number;
  opacity: number;
  hardness: number; // 0–1: 0 = fully soft, 1 = hard edge
};

export type BrushStroke = {
  canvas: HTMLCanvasElement;
  ctx: CanvasRenderingContext2D;
  width: number;
  height: number;
};

export type BrushDab = {
  x: number;
  y: number;
};

export function hexToRgb(hex: string): { r: number; g: number; b: number } {
  const clean = hex.replace("#", "").trim();
  if (!/^[0-9a-fA-F]{6}$/.test(clean)) return { r: 0, g: 0, b: 0 };
  return {
    r: parseInt(clean.slice(0, 2), 16),
    g: parseInt(clean.slice(2, 4), 16),
    b: parseInt(clean.slice(4, 6), 16),
  };
}

export function clampBrushOptions(options: BrushOptions): BrushOptions {
  return {
    color: options.color,
    size: Math.max(1, Number.isFinite(options.size) ? options.size : 1),
    opacity: Math.max(0, Math.min(1, Number.isFinite(options.opacity) ? options.opacity : 1)),
    hardness: Math.max(0, Math.min(1, Number.isFinite(options.hardness) ? options.hardness : 1)),
  };
}

export function buildBrushDabs(x0: number, y0: number, x1: number, y1: number, size: number): BrushDab[] {
  const dx = x1 - x0;
  const dy = y1 - y0;
  const dist = Math.sqrt(dx * dx + dy * dy);
  const step = Math.max(1, size * 0.25);
  const steps = Math.max(1, Math.ceil(dist / step));
  const dabs: BrushDab[] = [];

  for (let i = 0; i <= steps; i++) {
    const t = i / steps;
    dabs.push({ x: x0 + dx * t, y: y0 + dy * t });
  }

  return dabs;
}

function drawDab(
  ctx: CanvasRenderingContext2D,
  x: number,
  y: number,
  options: BrushOptions,
) {
  const normalized = clampBrushOptions(options);
  const r = normalized.size / 2;
  const { r: cr, g: cg, b: cb } = hexToRgb(normalized.color);

  const gradient = ctx.createRadialGradient(x, y, 0, x, y, r);

  gradient.addColorStop(0, `rgba(${cr},${cg},${cb},${normalized.opacity})`);
  gradient.addColorStop(normalized.hardness, `rgba(${cr},${cg},${cb},${normalized.opacity})`);
  gradient.addColorStop(1, `rgba(${cr},${cg},${cb},0)`);

  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2);
  ctx.fillStyle = gradient;
  ctx.fill();
}

/** Creates a fresh stroke canvas sized to the layer. */
export function createStroke(width: number, height: number): BrushStroke {
  const canvas = document.createElement("canvas");
  canvas.width = Math.max(1, Math.round(width));
  canvas.height = Math.max(1, Math.round(height));
  const ctx = canvas.getContext("2d");
  if (!ctx) throw new Error("Cannot create brush canvas context");
  return { canvas, ctx, width: canvas.width, height: canvas.height };
}

/** Paints a segment of a stroke from (x0,y0) to (x1,y1) using interpolated dabs. */
export function paintSegment(
  stroke: BrushStroke,
  x0: number,
  y0: number,
  x1: number,
  y1: number,
  options: BrushOptions,
) {
  const normalized = clampBrushOptions(options);
  for (const dab of buildBrushDabs(x0, y0, x1, y1, normalized.size)) {
    drawDab(stroke.ctx, dab.x, dab.y, normalized);
  }
}

/** Merges stroke canvas on top of the source image and returns a data URL. */
export function commitStroke(sourceUri: string, stroke: BrushStroke): Promise<string> {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.crossOrigin = "anonymous";
    image.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = image.naturalWidth;
      canvas.height = image.naturalHeight;
      const ctx = canvas.getContext("2d");
      if (!ctx) {
        reject(new Error("Cannot create merge canvas context"));
        return;
      }
      ctx.drawImage(image, 0, 0);
      // Scale stroke canvas to match image natural size
      ctx.drawImage(stroke.canvas, 0, 0, canvas.width, canvas.height);
      resolve(canvas.toDataURL("image/png"));
    };
    image.onerror = reject;
    image.src = sourceUri;
  });
}