Auto-Fill

​

Overview

​

Auto-Fill Empty Space

​

How It Works

1. Select bin size (W × D × H) using quick presets or custom dimensions
2. Click “Auto-Fill Grid” button in sidebar
3. Algorithm scans grid for empty cells (left-to-right, top-to-bottom)
4. Places bins at valid positions (collision-checked)
5. Grid updates with newly added bins
6. 3D preview renders all new geometry

​

Fill Algorithm

for (row = 0; row < gridRows; row++) {
  for (col = 0; col < gridCols; col++) {
    if (canPlaceBin(col, row, binW, binD)) {
      placeBin(col, row, binW, binD, binH);
    }
  }
}

• Greedy approach: Fills top-left first
• Collision detection: Skips occupied cells
• Partial fills: Places as many as fit (may leave gaps)

​

Bin Size Presets

​

Custom Dimensions

• Width: 1-10 cells
• Depth: 1-10 cells
• Height: 1-12 units
• Number inputs with validation

​

Optimize Layout

​

Bin-Packing Heuristic

1. Sort bins by area (largest first)
2. Try grid sizes from smallest to largest:
   • Start at minimum bounding box
   • Increment by 1 cell
   • Test up to 12×12 max
3. For each grid size, attempt to pack all bins:
   • Place each bin at first valid position
   • Scan left-to-right, top-to-bottom
   • Backtrack if placement fails
4. Return first valid configuration

​

Algorithm Details

function optimizeLayout(bins: Bin[]): { cols: number, rows: number } {
  const sorted = bins.sort((a, b) => (b.w * b.d) - (a.w * a.d));
  
  for (let size = minSize; size <= 12; size++) {
    if (canPackAll(sorted, size, size)) {
      return { cols: size, rows: size };
    }
  }
  
  return { cols: 12, rows: 12 }; // fallback
}

​

Use Cases

​

1. Uniform Bin Grids

1. Start with empty grid
2. Select bin size (e.g., 1×1×3u)
3. Click “Auto-Fill Grid”
4. Result: Fully packed baseplate

​

2. Mixed Layouts

1. Manually place large bins (2×3, 3×4, etc.)
2. Select small filler size (1×1 or 1×2)
3. Auto-fill remaining space
4. Result: No wasted cells

​

3. Baseplate Optimization

1. Add all required bins (any size)
2. Click “Optimize Layout”
3. Grid resizes to smallest fit
4. Bins rearrange automatically
5. Export optimized layout

​

Grid Size Presets

​

Fill Strategy Options

• Fill mode: Dense vs. sparse
• Color alternation: Checkerboard patterns
• Height variation: Random or gradient heights
• Feature randomization: Random dividers, magnets

​

Bill of Materials (BOM)

​

Bin Count by Type

1×1×3u: 24 bins
2×2×4u: 6 bins
1×3×6u: 4 bins

​

Material Estimate

• Total volume: Sum of all bin volumes (cm³)
• PLA weight: Volume × 1.24 g/cm³ density
• Cost estimate: Weight × price per kg
  • Default: €20/kg
  • Configurable in settings

​

Print Labels

• One row per bin
• Columns: Name, Dimensions, Grid Position, Features
• Printer-friendly layout
• Useful for organizing physical bins

​

Performance Considerations

​

Auto-Fill Speed

• Small bins (1×1): Fast (~0.1s per bin)
• Large bins (3×3): Slower (~0.5s per bin)
• Web Worker: Geometry generation offloaded
• Batch updates: UI updates every 5 bins

​

Optimize Layout Speed

• 10 bins: <1 second
• 50 bins: 2-5 seconds
• 100+ bins: May timeout (not recommended)

​

Undo/Redo Support

• Ctrl+Z: Undo last operation
• Ctrl+Shift+Z: Redo
• Full history stack preserved

​

Tips & Best Practices

​

Keyboard Shortcuts

• Ctrl+Z after auto-fill to undo
• Ctrl+A to select all bins (useful after auto-fill)
• Delete to remove all selected bins

​

Technical Implementation

• Collision detection: AABB (Axis-Aligned Bounding Box)
• Bin packing: Greedy first-fit decreasing heuristic
• Grid scanning: Row-major order (top-left to bottom-right)
• State management: Zustand store with history tracking
• Geometry generation: Web Worker (async)

​

Collision Detection Algorithm

function checkCollision(
  bins: Bin[],
  newBin: { x: number, y: number, w: number, d: number },
  excludeId: string | null,
  gridCols: number,
  gridRows: number
): boolean {
  // Check grid bounds
  if (newBin.x < 0 || newBin.y < 0 ||
      newBin.x + newBin.w > gridCols ||
      newBin.y + newBin.d > gridRows) {
    return true; // out of bounds
  }
  
  // Check overlap with existing bins
  for (const bin of bins) {
    if (bin.id === excludeId) continue;
    
    if (!(newBin.x >= bin.x + bin.w ||
          newBin.x + newBin.w <= bin.x ||
          newBin.y >= bin.y + bin.d ||
          newBin.y + newBin.d <= bin.y)) {
      return true; // collision
    }
  }
  
  return false; // no collision
}

​

Related Features