/** * 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;