First commit
This commit is contained in:
Stefano Manfredi
245
public/js/config.js
Normal file
245
public/js/config.js
Normal file
@@ -0,0 +1,245 @@
|
||||
/**
|
||||
* 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;
|
||||
Reference in New Issue
Block a user