Skip to content

EXAMPLES.md

Latest commit

 

History

History
277 lines (196 loc) · 7.06 KB

EXAMPLES.md

File metadata and controls

277 lines (196 loc) · 7.06 KB

Examples

Practical examples demonstrating common use cases for rect-utils.

Table of Contents

Creating a Grid Layout

Create a 3x3 grid of equal-sized cells:

import { RectSplit } from 'rect-utils';

const container = { x: 0, y: 0, width: 300, height: 300 };

// Split into 3 rows
const rows = RectSplit.vertical(container, 3);

// Split each row into 3 columns
const grid = rows.map(row => RectSplit.horizontal(row, 3));

// Access individual cells
const topLeftCell = grid[0][0];
const centerCell = grid[1][1];
const bottomRightCell = grid[2][2];

console.log('Center cell:', centerCell);
// { x: 100, y: 100, width: 100, height: 100 }

Panel with Header and Footer

Create a panel with fixed header and footer:

import { RectBorder, RectTransform } from 'rect-utils';

const panel = { x: 0, y: 0, width: 400, height: 600 };
const headerHeight = 60;
const footerHeight = 40;
const padding = 10;

// Extract header
const header = RectBorder.getTopSide(panel, headerHeight);

// Extract footer
const footer = RectBorder.getBottomSide(panel, footerHeight);

// Calculate content area
let content = RectBorder.cutFromTop(panel, headerHeight);
content = RectBorder.cutFromBottom(content, footerHeight);

// Add padding to content
content = RectTransform.deflate(content, padding, padding, padding, padding);

console.log('Header:', header);
console.log('Content:', content);
console.log('Footer:', footer);

Responsive Layout

Create a responsive layout that adjusts based on container size:

import { RectSplit, RectTransform } from 'rect-utils';

function createResponsiveLayout(container: Rectangle, isMobile: boolean) {
  if (isMobile) {
    // Stack vertically on mobile
    return RectSplit.vertical(container, 3);
  } else {
    // Arrange horizontally on desktop
    return RectSplit.horizontal(container, 3);
  }
}

const desktopContainer = { x: 0, y: 0, width: 1200, height: 400 };
const mobileContainer = { x: 0, y: 0, width: 375, height: 667 };

const desktopLayout = createResponsiveLayout(desktopContainer, false);
const mobileLayout = createResponsiveLayout(mobileContainer, true);

Collision Detection

Detect if rectangles collide:

import { RectCompare, RectGeometry } from 'rect-utils';

const player = { x: 100, y: 100, width: 50, height: 50 };
const obstacles = [
  { x: 200, y: 100, width: 50, height: 50 },
  { x: 150, y: 150, width: 50, height: 50 },
  { x: 50, y: 50, width: 50, height: 50 }
];

// Check collisions
const collisions = obstacles.filter(obstacle => 
  RectCompare.intersects(player, obstacle)
);

console.log(`Player collides with ${collisions.length} obstacles`);

// Check if player is within bounds
const gameBounds = { x: 0, y: 0, width: 800, height: 600 };
const isInBounds = RectCompare.contains(gameBounds, player);

console.log('Player in bounds:', isInBounds);

Centering Elements

Center elements within containers:

import { RectTransform, RectGeometry, ContentAlignment } from 'rect-utils';

const container = { x: 0, y: 0, width: 800, height: 600 };

// Center a dialog
const dialog = { x: 0, y: 0, width: 400, height: 300 };
const centeredDialog = RectTransform.align(
  dialog,
  container,
  ContentAlignment.MiddleCenter
);

// Position a button at bottom-right
const button = { x: 0, y: 0, width: 100, height: 40 };
const buttonWithMargin = RectTransform.deflate(container, 20, 20, 20, 20);
const positionedButton = RectTransform.align(
  button,
  buttonWithMargin,
  ContentAlignment.BottomRight
);

console.log('Centered dialog:', centeredDialog);
console.log('Bottom-right button:', positionedButton);

Padding and Margins

Apply padding and margins to layouts:

import { RectTransform, RectBorder } from 'rect-utils';

const card = { x: 10, y: 10, width: 300, height: 200 };

// Add outer margin
const margin = 10;
const cardWithMargin = RectTransform.inflate(card, margin, margin, margin, margin);

// Add inner padding
const padding = 15;
const contentArea = RectTransform.deflate(card, padding, padding, padding, padding);

// Create card with header
const headerHeight = 50;
const header = RectBorder.getTopSide(contentArea, headerHeight);
const body = RectBorder.cutFromTop(contentArea, headerHeight);

console.log('Card with margin:', cardWithMargin);
console.log('Header:', header);
console.log('Body:', body);

Sidebar Layout

Create a layout with sidebar:

import { RectBorder, RectTransform } from 'rect-utils';

const viewport = { x: 0, y: 0, width: 1200, height: 800 };
const sidebarWidth = 250;
const headerHeight = 60;
const padding = 20;

// Extract header
const header = RectBorder.getTopSide(viewport, headerHeight);

// Get remaining area
const mainArea = RectBorder.cutFromTop(viewport, headerHeight);

// Extract sidebar
const sidebar = RectBorder.getLeftSide(mainArea, sidebarWidth);

// Get content area
let content = RectBorder.cutFromLeft(mainArea, sidebarWidth);

// Add padding to content
content = RectTransform.deflate(content, padding, padding, padding, padding);

console.log('Header:', header);
console.log('Sidebar:', sidebar);
console.log('Content:', content);

// Create a two-column layout within content
const [leftColumn, rightColumn] = RectSplit.horizontal(content, 2);

console.log('Left column:', leftColumn);
console.log('Right column:', rightColumn);

Dashboard Layout

Create a complex dashboard layout:

import { RectBorder, RectSplit, RectTransform } from 'rect-utils';

const dashboard = { x: 0, y: 0, width: 1400, height: 900 };
const headerHeight = 80;
const sidebarWidth = 200;
const gap = 10;

// Header
const header = RectBorder.getTopSide(dashboard, headerHeight);

// Main area (below header)
let mainArea = RectBorder.cutFromTop(dashboard, headerHeight);

// Sidebar
const sidebar = RectBorder.getLeftSide(mainArea, sidebarWidth);

// Content area
let contentArea = RectBorder.cutFromLeft(mainArea, sidebarWidth);
contentArea = RectTransform.deflate(contentArea, gap, gap, gap, gap);

// Split content into top and bottom sections (70/30)
const topHeight = Math.floor(contentArea.height * 0.7);
const topSection = RectBorder.getTopSide(contentArea, topHeight);
const bottomSection = RectBorder.cutFromTop(contentArea, topHeight + gap);

// Split top section into 3 cards
const topCards = RectSplit.horizontal(topSection, 3).map(card =>
  RectTransform.deflate(card, gap / 2, gap / 2, gap / 2, gap / 2)
);

// Split bottom section into 2 cards
const bottomCards = RectSplit.horizontal(bottomSection, 2).map(card =>
  RectTransform.deflate(card, gap / 2, gap / 2, gap / 2, gap / 2)
);

console.log('Dashboard layout:');
console.log('- Header:', header);
console.log('- Sidebar:', sidebar);
console.log('- Top cards:', topCards);
console.log('- Bottom cards:', bottomCards);