Function renderBeadPattern

web/js/main.js:900–1011

(gridImageData, paletteMeta)

}

function renderBeadPattern(gridImageData, paletteMeta) {
    if (!gridImageData || !paletteMeta || !paletteMeta.codeMap) return null;

    const { width: gridW, height: gridH } = gridImageData;
    const data = gridImageData.data;
    const cellSize = MIN_CELL_SIZE;

    const canvasW = gridW * cellSize;
    const canvasH = gridH * cellSize + HEADER_HEIGHT;

    const patternCanvas = document.createElement('canvas');
    patternCanvas.width = canvasW;
    patternCanvas.height = canvasH;
    const pCtx = patternCanvas.getContext('2d');

    // Draw brand header
    pCtx.fillStyle = '#f5f5f5';
    pCtx.fillRect(0, 0, canvasW, HEADER_HEIGHT);
    pCtx.fillStyle = '#333333';
    pCtx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
    pCtx.textAlign = 'left';
    pCtx.textBaseline = 'middle';
    pCtx.fillText(t('bead.patternTitle', { brand: paletteMeta.brand || 'Bead' }), 12, HEADER_HEIGHT / 2);

    // Build fast lookup: color key → { r, g, b, fullCode }
    const colorEntries = [];
    for (const [key, fullCode] of Object.entries(paletteMeta.codeMap)) {
        const [r, g, b] = key.split(',').map(Number);
        colorEntries.push({ r, g, b, key, fullCode });
    }

    // Nearest-color lookup with cache
    const codeCache = new Map();
    function findCode(r, g, b) {
        const key = `${r},${g},${b}`;
        if (codeCache.has(key)) return codeCache.get(key);

        let minDist = Infinity;
        let bestCode = null;
        for (const entry of colorEntries) {
            const dr = r - entry.r;
            const dg = g - entry.g;
            const db = b - entry.b;
            const dist = dr * dr + dg * dg + db * db;
            if (dist < minDist) {
                minDist = dist;
                bestCode = entry.fullCode;
            }
        }
        codeCache.set(key, bestCode);
        return bestCode;
    }

    // Compute optimal font size: each single digit width must not exceed 12px
    const MAX_DIGIT_WIDTH = 12;
    let fontSize = 18; // enlarged ~80% from previous 10px baseline
    const fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
    pCtx.font = `bold ${fontSize}px ${fontFamily}`;