datacenter-designer/public/js/config.js

/**
 * Frontend Configuration
 * Central configuration for all frontend constants and settings
 */

export const CONFIG = {
  // Rack Configuration
  RACK: {
    WIDTH: 520,
    HEIGHT: 1510,
    SLOTS: 42,
    NAME_PREFIX_DEFAULT: 'RACK',
    // Grid snapping
    GRID: {
      HORIZONTAL: 600,
      VERTICAL: 1610
    },
    // Visual styling
    FILL_COLOR: '#f8f8f8',
    STROKE_COLOR: '#333',
    STROKE_WIDTH: 2,
    // Name label
    NAME_OFFSET_Y: -25,
    NAME_FONT_SIZE: 16,
    NAME_FONT_FAMILY: 'Arial',
    NAME_COLOR: '#333'
  },

  // Device Configuration
  DEVICE: {
    HEIGHT: 32,
    SPACING: 2,
    // Width varies by view
    WIDTH: {
      PHYSICAL: 500,
      LOGICAL: 120
    },
    // Margins within rack
    MARGIN: {
      TOP: 10,
      RIGHT: 10,
      BOTTOM: 10,
      LEFT: 10
    },
    // Visual styling
    STROKE_WIDTH: 1,
    CORNER_RADIUS: 4,
    // Text
    FONT_SIZE: 13,
    FONT_FAMILY: 'Arial',
    TEXT_COLOR: '#fff',
    // Form factor
    MIN_RACK_UNITS: 1,
    MAX_RACK_UNITS: 42
  },

  // Connection Configuration
  CONNECTION: {
    STROKE_WIDTH: 2,
    STROKE_COLOR: '#4A90E2',
    STROKE_COLOR_HOVER: '#357ABD',
    STROKE_COLOR_SELECTED: '#FF6B6B',
    SELECTED_WIDTH: 3,
    // Waypoint handles
    HANDLE_RADIUS: 6,
    HANDLE_FILL: '#4A90E2',
    HANDLE_STROKE: '#fff',
    HANDLE_STROKE_WIDTH: 2,
    // Hit detection
    HIT_STROKE_WIDTH: 10
  },

  // Canvas/Stage Configuration
  CANVAS: {
    // Initial position offset
    INITIAL_OFFSET: { x: 50, y: 50 },
    // Zoom limits
    MIN_SCALE: 0.1,
    MAX_SCALE: 3.0,
    // Zoom step
    ZOOM_STEP: 0.1,
    // Default scale
    DEFAULT_SCALE: 1.0,
    // Pan cursor
    PAN_CURSOR: 'grabbing'
  },

  // View Configuration
  VIEWS: {
    CANVAS: {
      PHYSICAL: 'physical',
      LOGICAL: 'logical'
    },
    TABLE: {
      RACKS: 'racks',
      DEVICES: 'devices',
      CONNECTIONS: 'connections'
    }
  },

  // UI Configuration
  UI: {
    // Toolbar height
    TOOLBAR_HEIGHT: 50,
    // Table pane
    TABLE_PANE: {
      MIN_HEIGHT: 150,
      DEFAULT_HEIGHT: 300,
      MAX_HEIGHT_RATIO: 0.7 // 70% of viewport
    },
    // Resize handle
    RESIZE_HANDLE_HEIGHT: 6,
    // Context menu
    CONTEXT_MENU: {
      MIN_WIDTH: 200,
      ANIMATION_DELAY: 100
    },
    // Modals
    MODAL: {
      MAX_WIDTH: 600,
      MAX_WIDTH_LARGE: 800,
      MAX_HEIGHT_RATIO: 0.8
    }
  },

  // Animation Configuration
  ANIMATION: {
    DURATION: 200, // ms
    EASING: 'ease-in-out'
  },

  // Colors (Theme)
  COLORS: {
    PRIMARY: '#4A90E2',
    PRIMARY_DARK: '#357ABD',
    SECONDARY: '#f5f5f5',
    SUCCESS: '#4CAF50',
    DANGER: '#d32f2f',
    WARNING: '#ff9800',
    // Grays
    GRAY_100: '#f9f9f9',
    GRAY_200: '#f5f5f5',
    GRAY_300: '#e0e0e0',
    GRAY_400: '#d0d0d0',
    GRAY_500: '#999',
    GRAY_600: '#666',
    GRAY_700: '#333',
    // Backgrounds
    BG_CANVAS: '#f5f5f5',
    BG_RACK: '#f8f8f8',
    BG_MODAL: 'rgba(0, 0, 0, 0.5)',
    // Selection
    SELECTION_BG: '#e3f2fd',
    HOVER_BG: '#f0f7ff'
  },

  // Keyboard Shortcuts
  KEYS: {
    DELETE: ['Delete', 'Backspace'],
    ESCAPE: 'Escape',
    CTRL: 'Control',
    // Future shortcuts
    UNDO: 'z', // Ctrl+Z
    REDO: 'y', // Ctrl+Y
    SAVE: 's', // Ctrl+S
    SELECT_ALL: 'a', // Ctrl+A
    COPY: 'c', // Ctrl+C
    PASTE: 'v', // Ctrl+V
    FIT_VIEW: 'f' // F key
  },

  // API Configuration
  API: {
    BASE_URL: '', // Same origin
    TIMEOUT: 30000, // 30 seconds
    RETRY_ATTEMPTS: 3,
    RETRY_DELAY: 1000 // 1 second
  },

  // Local Storage Keys
  STORAGE: {
    CURRENT_PROJECT_ID: 'currentProjectId',
    CURRENT_CANVAS_VIEW: 'currentCanvasView',
    GRID_SIZE: 'gridSize',
    GRID_VERTICAL: 'gridVertical',
    THEME: 'theme', // 'light' or 'dark'
    ZOOM_LEVEL: 'zoomLevel'
  },

  // Export/Import
  EXPORT: {
    VERSION: '1.0',
    JSON_INDENT: 2,
    EXCEL_FORMATS: {
      DATE: 'yyyy-mm-dd',
      DATETIME: 'yyyy-mm-dd hh:mm:ss'
    }
  },

  // Validation
  VALIDATION: {
    PROJECT: {
      NAME_MIN: 1,
      NAME_MAX: 100,
      DESC_MAX: 500
    },
    RACK: {
      NAME_MIN: 1,
      NAME_MAX: 50,
      COUNT_MIN: 1,
      COUNT_MAX: 20
    },
    DEVICE: {
      NAME_MIN: 1,
      NAME_MAX: 50
    }
  },

  // Debug
  DEBUG: {
    ENABLED: false, // Set to true for development
    LOG_API_CALLS: false,
    LOG_STATE_CHANGES: false,
    SHOW_FPS: false,
    KONVA_WARNINGS: true
  }
};

// Freeze config to prevent modifications
Object.freeze(CONFIG);
Object.freeze(CONFIG.RACK);
Object.freeze(CONFIG.DEVICE);
Object.freeze(CONFIG.CONNECTION);
Object.freeze(CONFIG.CANVAS);
Object.freeze(CONFIG.VIEWS);
Object.freeze(CONFIG.UI);
Object.freeze(CONFIG.COLORS);
Object.freeze(CONFIG.KEYS);
Object.freeze(CONFIG.API);
Object.freeze(CONFIG.STORAGE);
Object.freeze(CONFIG.EXPORT);
Object.freeze(CONFIG.VALIDATION);
Object.freeze(CONFIG.DEBUG);

export default CONFIG;