Layout System

Veltix provides a powerful free-form layout system that allows you to create pixel-perfect dashboards with complete control over component positioning and sizing.

Overview

The layout system is built on top of react-moveable, providing:

• Drag & Drop: Move components anywhere on the canvas
• Resize: Adjust component dimensions with precision
• Rotate: Rotate components to any angle
• Grid Snapping: Optional grid alignment for clean layouts
• Layer Management: Control component stacking order

Basic Layout Operations

Moving Components

1. Select a component by clicking on it
2. Drag the component to your desired position
3. Release to place the component

// Example: Programmatically moving a component
const moveComponent = (id: string, x: number, y: number) => {
  setComponents(prev => 
    prev.map(comp => 
      comp.id === id 
        ? { ...comp, position: { x, y } }
        : comp
    )
  );
};

Resizing Components

1. Select a component to show resize handles
2. Drag the handles to resize the component
3. Hold Shift while resizing to maintain aspect ratio

// Example: Resizing with constraints
const resizeComponent = (id: string, width: number, height: number) => {
  setComponents(prev => 
    prev.map(comp => 
      comp.id === id 
        ? { 
            ...comp, 
            size: { 
              width: Math.max(100, width), // Minimum width
              height: Math.max(50, height)  // Minimum height
            }
          }
        : comp
    )
  );
};

Rotating Components

1. Select a component to show rotation handle
2. Drag the rotation handle to rotate the component
3. Hold Shift while rotating for 15-degree increments

// Example: Rotating a component
const rotateComponent = (id: string, angle: number) => {
  setComponents(prev => 
    prev.map(comp => 
      comp.id === id 
        ? { ...comp, rotation: angle }
        : comp
    )
  );
};

Grid System

Enabling Grid Snapping

// Enable grid snapping
const gridConfig = {
  enabled: true,
  size: 20, // Grid cell size in pixels
  snapThreshold: 10 // Distance to snap to grid
};

Grid Alignment

• Snap to Grid: Components automatically align to grid lines
• Grid Size: Configurable grid cell size (10px, 20px, 50px)
• Snap Threshold: Distance within which components snap to grid

Layer Management

Z-Index Control

// Bring component to front
const bringToFront = (id: string) => {
  setComponents(prev => {
    const maxZ = Math.max(...prev.map(c => c.zIndex || 0));
    return prev.map(comp => 
      comp.id === id 
        ? { ...comp, zIndex: maxZ + 1 }
        : comp
    );
  });
};
 
// Send component to back
const sendToBack = (id: string) => {
  setComponents(prev => {
    const minZ = Math.min(...prev.map(c => c.zIndex || 0));
    return prev.map(comp => 
      comp.id === id 
        ? { ...comp, zIndex: minZ - 1 }
        : comp
    );
  });
};

Advanced Features

Component Constraints

// Define movement constraints
const constraints = {
  minX: 0,
  maxX: canvasWidth - componentWidth,
  minY: 0,
  maxY: canvasHeight - componentHeight
};

Responsive Layout

// Responsive positioning
const responsivePosition = {
  x: '10%',
  y: '20%',
  width: '30%',
  height: '40%'
};

Layout Templates

Pre-built layout templates for common dashboard patterns:

• Grid Layout: Equal-sized components in a grid
• Sidebar Layout: Main content with sidebar
• Header Layout: Header with content area
• Custom Layout: User-defined layouts

Keyboard Shortcuts

Best Practices

1. Component Spacing

• Maintain consistent spacing between components
• Use grid alignment for clean layouts
• Consider visual hierarchy in component placement

2. Performance

• Limit the number of components on screen
• Use virtual scrolling for large datasets
• Optimize component rendering

3. Accessibility

• Ensure sufficient contrast between components
• Provide keyboard navigation
• Include screen reader support

Troubleshooting

Common Issues

Component not moving

• Check if the component is locked
• Verify component selection
• Ensure no other components are blocking

Grid not snapping

• Verify grid snapping is enabled
• Check grid size configuration
• Adjust snap threshold if needed

Performance issues

• Reduce component count
• Optimize component rendering
• Use lazy loading for large dashboards