penframe/src/browser.js

A lightweight DSL-based wireframe and UI structure visualization tool.

const parser = require('../dist/parser');
const astToSvg = require('./svg/astToSvg');

/**
 * Parse PenFrame DSL to AST (Browser version)
 * @param {string} dslCode - PenFrame DSL code
 * @returns {Object} AST object
 */
function parse(dslCode) {
  return parser.parse(dslCode);
}

/**
 * Convert PenFrame DSL directly to SVG (Browser version)
 * @param {string} dslCode - PenFrame DSL code
 * @returns {string} SVG content
 */
function penframeToSvg(dslCode) {
  const ast = parse(dslCode);
  return astToSvg(ast);
}

/**
 * Convert PenFrame DSL to PNG Data URL using Canvas API (Browser version)
 * @param {string} dslCode - PenFrame DSL code
 * @param {Object} options - Conversion options
 * @param {number} options.width - Canvas width (default: 800)
 * @param {number} options.height - Canvas height (default: 600)
 * @param {number} options.scale - Scale factor (default: 1)
 * @param {string} options.background - Background color (default: 'white')
 * @returns {Promise<string>} PNG data URL
 */
async function penframeToPngDataURL(dslCode, options = {}) {
  const {
    width = 800,
    height = 600,
    scale = 1,
    background = 'white'
  } = options;

  // Get SVG content
  const svgContent = penframeToSvg(dslCode);
  
  // Create canvas
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  canvas.width = width * scale;
  canvas.height = height * scale;
  
  // Set background
  if (background !== 'transparent') {
    ctx.fillStyle = background;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
  
  // Create image from SVG
  return new Promise((resolve, reject) => {
    const img = new Image();
    const svgBlob = new Blob([svgContent], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(svgBlob);
    
    img.onload = () => {
      ctx.scale(scale, scale);
      ctx.drawImage(img, 0, 0, width, height);
      URL.revokeObjectURL(url);
      
      const dataURL = canvas.toDataURL('image/png');
      resolve(dataURL);
    };
    
    img.onerror = () => {
      URL.revokeObjectURL(url);
      reject(new Error('Failed to load SVG'));
    };
    
    img.src = url;
  });
}

/**
 * Convert PenFrame DSL to PNG Blob using Canvas API (Browser version)
 * @param {string} dslCode - PenFrame DSL code
 * @param {Object} options - Conversion options
 * @returns {Promise<Blob>} PNG blob
 */
async function penframeToPngBlob(dslCode, options = {}) {
  const dataURL = await penframeToPngDataURL(dslCode, options);
  
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    
    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      
      canvas.toBlob((blob) => {
        resolve(blob);
      }, 'image/png');
    };
    
    img.src = dataURL;
  });
}

// Browser-compatible exports
if (typeof module !== 'undefined' && module.exports) {
  // CommonJS (for webpack)
  module.exports = {
    parse,
    penframeToSvg,
    penframeToPngDataURL,
    penframeToPngBlob,
    astToSvg,
    parser
  };
} else {
  // Browser global (for script tag)
  window.PenFrame = {
    parse,
    penframeToSvg,
    penframeToPngDataURL,
    penframeToPngBlob,
    astToSvg,
    parser
  };
}