rough-native/bin/config.js

Create graphics using HTML Canvas or SVG with a hand-drawn, sketchy, appearance. Features comprehensive React hooks, memory management, and React 18 concurrent rendering support.

/**
 * Centralized configuration for rough-native
 * All magic numbers and configurable values are defined here
 */
// Memory Management Configuration
export const MEMORY_CONFIG = {
    // Memory pressure thresholds
    HIGH_MEMORY_PRESSURE_THRESHOLD: 0.8,
    MEDIUM_MEMORY_PRESSURE_THRESHOLD: 0.6,
    // Cache sizes by memory pressure
    CACHE_SIZE_HIGH_PRESSURE: 50,
    CACHE_SIZE_MEDIUM_PRESSURE: 200,
    CACHE_SIZE_LOW_PRESSURE: 500,
    CACHE_SIZE_DEFAULT: 200,
    // Cache cleanup percentages
    HIGH_PRESSURE_CLEANUP_PERCENT: 0.75,
    HIGH_PRESSURE_KEEP_PERCENT: 0.25,
    MEDIUM_PRESSURE_CLEANUP_PERCENT: 0.5,
    MEDIUM_PRESSURE_KEEP_PERCENT: 0.5,
    // Shape cache multiplier
    SHAPE_CACHE_MULTIPLIER: 2,
    // Concurrency limits
    MAX_CONCURRENT_GENERATIONS_UNDER_PRESSURE: 2,
    // Check intervals
    MEMORY_CHECK_INTERVAL_MS: 5000,
    // Conversion constants
    BYTES_TO_KB: 1024,
    KB_TO_MB: 1024,
};
// Error Handling Configuration
export const ERROR_CONFIG = {
    MAX_ERROR_CACHE_SIZE: 50,
    ERROR_RATE_LIMIT_PER_MINUTE: 10,
    ERROR_CACHE_CLEANUP_INTERVAL_MS: 60000,
    SAMPLE_SIZE_FOR_ARRAY_PARAMS: 3,
    MS_PER_MINUTE: 60000,
};
// Drawing Algorithm Configuration
export const DRAWING_CONFIG = {
    // Default drawing options
    DEFAULT_MAX_RANDOMNESS_OFFSET: 2,
    DEFAULT_ROUGHNESS: 1,
    DEFAULT_BOWING: 1,
    DEFAULT_STROKE_WIDTH: 1,
    DEFAULT_CURVE_TIGHTNESS: 0,
    DEFAULT_CURVE_FITTING: 0.95,
    DEFAULT_CURVE_STEP_COUNT: 9,
    DEFAULT_FILL_WEIGHT: -1,
    DEFAULT_HACHURE_ANGLE: -41,
    DEFAULT_HACHURE_GAP: -1,
    DEFAULT_DASH_OFFSET: -1,
    DEFAULT_DASH_GAP: -1,
    DEFAULT_ZIGZAG_OFFSET: -1,
    DEFAULT_SEED: 0,
    DEFAULT_DISABLE_MULTI_STROKE: false,
    DEFAULT_DISABLE_MULTI_STROKE_FILL: false,
    DEFAULT_PRESERVE_VERTICES: false,
    DEFAULT_FILL_SHAPE_ROUGHNESS_GAIN: 0.8,
    // Algorithm-specific multipliers
    CURVE_ROUGHNESS_MULTIPLIER: 0.2,
    MULTI_STROKE_OFFSET_MULTIPLIER: 1.5,
    MULTI_STROKE_ROUGHNESS_MULTIPLIER: 0.22,
    // Bezier curve approximation
    BEZIER_CURVE_POINTS: 10,
    // Simplification
    SIMPLIFICATION_FACTOR: 4,
};
// Rendering Calculations Configuration
export const RENDERING_CONFIG = {
    // Curve calculations
    CURVE_STEP_COUNT_BASE: 200,
    // Ellipse calculations
    ELLIPSE_INCREMENT_OFFSET_FACTOR: 0.1,
    ELLIPSE_INCREMENT_OFFSET_RANGE: 0.4,
    ELLIPSE_MULTI_STROKE_FACTOR: 1.5,
    // Arc calculations
    ARC_RADIUS_OFFSET_FACTOR: 0.01,
    ARC_INCREMENT_DIVISOR: 2,
    ARC_MULTI_STROKE_FACTOR: 1.5,
    PATTERN_FILL_ARC_RADIUS_OFFSET: 0.01,
    // Line calculations
    LINE_LENGTH_THRESHOLD_SHORT: 200,
    LINE_LENGTH_THRESHOLD_LONG: 500,
    ROUGHNESS_GAIN_LONG_LINES: 0.4,
    ROUGHNESS_GAIN_COEFFICIENT: -0.0016668,
    ROUGHNESS_GAIN_CONSTANT: 1.233334,
    // Offset calculations
    OFFSET_SQUARED_MULTIPLIER: 100,
    OFFSET_DIVISOR_LONG_LINES: 10,
    // Diverge calculations
    DIVERGE_POINT_BASE: 0.2,
    DIVERGE_POINT_RANGE: 0.2,
    BOWING_DISPLACEMENT_DIVISOR: 200,
};
// Fill Pattern Configuration
export const FILL_PATTERN_CONFIG = {
    // Hachure fill
    HACHURE_ANGLE_ADJUSTMENT: 90,
    DEFAULT_HACHURE_GAP_MULTIPLIER: 4,
    MIN_HACHURE_GAP: 0.1,
    HACHURE_SKIP_OFFSET_THRESHOLD: 0.7,
    // Cross-hatch
    CROSS_HATCH_ANGLE_INCREMENT: 90,
    // Zigzag fill
    DEFAULT_ZIGZAG_GAP_MULTIPLIER: 4,
    MIN_ZIGZAG_GAP: 0.1,
    DEGREES_TO_RADIANS_FACTOR: 180,
    ZIGZAG_DISPLACEMENT_FACTOR: 0.5,
};
// Random Number Generation Configuration
export const RANDOM_CONFIG = {
    SEED_UPPER_BOUND: 2 ** 31,
    LCG_MASK: 2 ** 31 - 1,
    LCG_MULTIPLIER: 48271,
    LCG_DIVISOR: 2 ** 31,
};
// React Hook Configuration
export const REACT_HOOK_CONFIG = {
    ID_PREFIX: 'rough-',
    MAX_RECURSION_DEPTH: 10,
    KEY_LOOKUP_SET_THRESHOLD: 10,
    DEFAULT_CURVE_TIGHTNESS: 2,
};
// Validation Configuration
export const VALIDATION_CONFIG = {
    MIN_POINT_ARRAY_LENGTH: 2,
    MIN_POLYGON_POINTS: 3,
    MIN_PATH_STRING_LENGTH: 0,
};
// Environment-based configuration
export const getEnvironmentConfig = () => {
    var _a, _b;
    const isProduction = typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'production';
    const isLowEndDevice = typeof process !== 'undefined' && ((_b = process.env) === null || _b === void 0 ? void 0 : _b.ROUGH_LOW_END_DEVICE) === 'true';
    return {
        // Adjust cache sizes based on environment
        cacheSize: isLowEndDevice
            ? MEMORY_CONFIG.CACHE_SIZE_HIGH_PRESSURE
            : isProduction
                ? MEMORY_CONFIG.CACHE_SIZE_MEDIUM_PRESSURE
                : MEMORY_CONFIG.CACHE_SIZE_DEFAULT,
        // Adjust memory thresholds
        highMemoryThreshold: isLowEndDevice
            ? 0.7 // More aggressive for low-end devices
            : MEMORY_CONFIG.HIGH_MEMORY_PRESSURE_THRESHOLD,
        // Adjust check intervals
        memoryCheckInterval: isProduction
            ? MEMORY_CONFIG.MEMORY_CHECK_INTERVAL_MS * 2 // Check less frequently in production
            : MEMORY_CONFIG.MEMORY_CHECK_INTERVAL_MS,
        // Error handling
        enableErrorLogging: !isProduction,
        errorRateLimit: isProduction
            ? ERROR_CONFIG.ERROR_RATE_LIMIT_PER_MINUTE / 2 // More restrictive in production
            : ERROR_CONFIG.ERROR_RATE_LIMIT_PER_MINUTE,
    };
};
// Export all configurations as a single object for convenience
export const CONFIG = {
    MEMORY: MEMORY_CONFIG,
    ERROR: ERROR_CONFIG,
    DRAWING: DRAWING_CONFIG,
    RENDERING: RENDERING_CONFIG,
    FILL_PATTERN: FILL_PATTERN_CONFIG,
    RANDOM: RANDOM_CONFIG,
    REACT_HOOK: REACT_HOOK_CONFIG,
    VALIDATION: VALIDATION_CONFIG,
    getEnvironment: getEnvironmentConfig,
};
export default CONFIG;