Bounding Box

About 4 min

Bounding Box

BoundingBox represents an axis-aligned bounding box (AABB). It is used to describe entity extents, collision detection, selection checks, and more.

Create a Bounding Box

import { BoundingBox, Point2D } from 'vjcad';

// Create from two corner points
const bbox = new BoundingBox(
  new Point2D(0, 0),      // First corner
  new Point2D(100, 100)   // Second corner
);

// Corner order does not matter; min/max are calculated automatically
const bbox2 = new BoundingBox(
  new Point2D(100, 100),
  new Point2D(0, 0)
);
// bbox2.minX = 0, bbox2.maxX = 100

// Create an empty bounding box (defaults to origin)
const emptyBox = new BoundingBox();

Properties

Coordinate Properties

Property	Type	Description
`pt1`	`Point2D`	First corner point passed to constructor
`pt2`	`Point2D`	Second corner point passed to constructor
`minX`	`number`	Minimum X
`maxX`	`number`	Maximum X
`minY`	`number`	Minimum Y
`maxY`	`number`	Maximum Y

const bbox = new BoundingBox(new Point2D(10, 20), new Point2D(100, 80));

console.log(bbox.minX);  // 10
console.log(bbox.maxX);  // 100
console.log(bbox.minY);  // 20
console.log(bbox.maxY);  // 80

Size Properties

Property	Type	Description
`width`	`number`	Width (`maxX - minX`)
`height`	`number`	Height (`maxY - minY`)
`center`	`Point2D`	Center point

const bbox = new BoundingBox(new Point2D(0, 0), new Point2D(100, 60));

console.log(bbox.width);   // 100
console.log(bbox.height);  // 60
console.log(bbox.center);  // Point2D(50, 30)

Corner Getters

Property	Description	Coordinate
`minPoint`	Minimum point (bottom-left)	`(minX, minY)`
`maxPoint`	Maximum point (top-right)	`(maxX, maxY)`
`BL`	Bottom Left	`(minX, minY)`
`BR`	Bottom Right	`(maxX, minY)`
`TL`	Top Left	`(minX, maxY)`
`TR`	Top Right	`(maxX, maxY)`
`point1`	First corner (bottom-left)	`(minX, minY)`
`point2`	Second corner (bottom-right)	`(maxX, minY)`
`point3`	Third corner (top-right)	`(maxX, maxY)`
`point4`	Fourth corner (top-left)	`(minX, maxY)`

const bbox = new BoundingBox(new Point2D(0, 0), new Point2D(100, 80));

// Directional naming
console.log(bbox.BL);  // Point2D(0, 0)    - bottom-left
console.log(bbox.BR);  // Point2D(100, 0)  - bottom-right
console.log(bbox.TL);  // Point2D(0, 80)   - top-left
console.log(bbox.TR);  // Point2D(100, 80) - top-right

// Numbered naming (counterclockwise)
console.log(bbox.point1);  // Point2D(0, 0)
console.log(bbox.point2);  // Point2D(100, 0)
console.log(bbox.point3);  // Point2D(100, 80)
console.log(bbox.point4);  // Point2D(0, 80)

State Properties

Property	Type	Description
`hasSizeBounds`	`boolean`	Whether it has actual size
`isSinglePointBounds`	`boolean`	Whether it degenerates to a single point

const normalBox = new BoundingBox(new Point2D(0, 0), new Point2D(100, 100));
console.log(normalBox.hasSizeBounds);  // true

const pointBox = new BoundingBox(new Point2D(50, 50), new Point2D(50, 50));
console.log(pointBox.isSinglePointBounds);  // true

Methods

`move()` - Move the Bounding Box

Move the bounding box from one position to another:

const bbox = new BoundingBox(new Point2D(0, 0), new Point2D(100, 100));

// Move bounding box by (50, 30)
bbox.move(new Point2D(0, 0), new Point2D(50, 30));

console.log(bbox.minX);  // 50
console.log(bbox.minY);  // 30
console.log(bbox.maxX);  // 150
console.log(bbox.maxY);  // 130

`isPointInBox()` - Point Containment Test

Check whether a point lies inside the bounding box, including the boundary:

const bbox = new BoundingBox(new Point2D(0, 0), new Point2D(100, 100));

console.log(bbox.isPointInBox(new Point2D(50, 50)));   // true - inside
console.log(bbox.isPointInBox(new Point2D(0, 0)));     // true - on boundary
console.log(bbox.isPointInBox(new Point2D(100, 100))); // true - on boundary
console.log(bbox.isPointInBox(new Point2D(150, 50)));  // false - outside

Bounding Box Merge

Use mergeBoundingBoxes() to merge multiple boxes into the smallest bounding box containing them all:

import { mergeBoundingBoxes, BoundingBox, Point2D } from 'vjcad';

const bbox1 = new BoundingBox(new Point2D(0, 0), new Point2D(50, 50));
const bbox2 = new BoundingBox(new Point2D(30, 30), new Point2D(100, 80));
const bbox3 = new BoundingBox(new Point2D(-20, 10), new Point2D(40, 60));

// Merge multiple bounding boxes
const merged = mergeBoundingBoxes([bbox1, bbox2, bbox3]);

console.log(merged.minX);  // -20
console.log(merged.minY);  // 0
console.log(merged.maxX);  // 100
console.log(merged.maxY);  // 80

Get Entity Bounding Boxes

All entities have a boundingBox() method that returns the entity's bounding box in world coordinates (WCS):

import { LineEnt, CircleEnt, Point2D } from 'vjcad';

// Line bounding box
const line = new LineEnt(new Point2D(0, 0), new Point2D(100, 50));
const lineBbox = line.boundingBox();
console.log(lineBbox.width);   // 100
console.log(lineBbox.height);  // 50

// Circle bounding box
const circle = new CircleEnt(new Point2D(50, 50), 30);
const circleBbox = circle.boundingBox();
console.log(circleBbox.minX);  // 20 (50 - 30)
console.log(circleBbox.maxX);  // 80 (50 + 30)

Bounding Box Intersection Tests

Check Whether Two Bounding Boxes Intersect

function boxesIntersect(box1: BoundingBox, box2: BoundingBox): boolean {
  return !(
    box1.maxX < box2.minX ||
    box1.minX > box2.maxX ||
    box1.maxY < box2.minY ||
    box1.minY > box2.maxY
  );
}

// Example
const box1 = new BoundingBox(new Point2D(0, 0), new Point2D(50, 50));
const box2 = new BoundingBox(new Point2D(40, 40), new Point2D(100, 100));
const box3 = new BoundingBox(new Point2D(60, 60), new Point2D(100, 100));

console.log(boxesIntersect(box1, box2));  // true - overlap
console.log(boxesIntersect(box1, box3));  // false - no overlap

Check Whether One Bounding Box Fully Contains Another

function boxContains(outer: BoundingBox, inner: BoundingBox): boolean {
  return (
    outer.minX <= inner.minX &&
    outer.maxX >= inner.maxX &&
    outer.minY <= inner.minY &&
    outer.maxY >= inner.maxY
  );
}

Bounding Box Operations

Expand Bounding Box

function expandBox(box: BoundingBox, margin: number): BoundingBox {
  return new BoundingBox(
    new Point2D(box.minX - margin, box.minY - margin),
    new Point2D(box.maxX + margin, box.maxY + margin)
  );
}

// Example
const bbox = new BoundingBox(new Point2D(10, 10), new Point2D(90, 90));
const expanded = expandBox(bbox, 5);
// expanded: (5, 5) - (95, 95)

Compute Intersection of Two Bounding Boxes

function boxIntersection(box1: BoundingBox, box2: BoundingBox): BoundingBox | null {
  const minX = Math.max(box1.minX, box2.minX);
  const minY = Math.max(box1.minY, box2.minY);
  const maxX = Math.min(box1.maxX, box2.maxX);
  const maxY = Math.min(box1.maxY, box2.maxY);
  
  // Check whether a valid intersection exists
  if (minX > maxX || minY > maxY) {
    return null;
  }
  
  return new BoundingBox(
    new Point2D(minX, minY),
    new Point2D(maxX, maxY)
  );
}

Use Cases

Zoom View to Extent

import { Engine, mergeBoundingBoxes } from 'vjcad';

// Zoom view to show all selected entities
function zoomToSelection() {
  const selectedEntities = Engine.getSelectedEntities();
  
  if (selectedEntities.length === 0) return;
  
  // Get bounding boxes of all entities
  const boxes = selectedEntities
    .map(e => e.boundingBox())
    .filter(box => box.hasSizeBounds);
  
  if (boxes.length === 0) return;
  
  // Merge into one overall box
  const merged = mergeBoundingBoxes(boxes);
  
  // Zoom view
  Engine.zoomToExtent(merged);
}

Fast Collision Detection

Use bounding boxes for a rough collision check first, then do a precise check only if needed:

function quickCollisionCheck(entity1: EntityBase, entity2: EntityBase): boolean {
  const box1 = entity1.boundingBox();
  const box2 = entity2.boundingBox();
  
  // If bounding boxes do not intersect, entities definitely do not collide
  if (!boxesIntersect(box1, box2)) {
    return false;
  }
  
  // If bounding boxes intersect, perform precise detection
  return preciseCollisionCheck(entity1, entity2);
}

Implement Selection Box

import { GeometryUtils } from 'vjcad';

function selectEntitiesInBox(
  selectionBox: BoundingBox, 
  entities: EntityBase[],
  mode: 'Window' | 'Cross'
): EntityBase[] {
  return entities.filter(entity => {
    const entityBox = entity.boundingBox();
    
    if (mode === 'Window') {
      // Window mode: entity must be fully inside selection box
      return boxContains(selectionBox, entityBox);
    } else {
      // Cross mode: entity only needs to intersect selection box
      return boxesIntersect(selectionBox, entityBox);
    }
  });
}

Calculate Bounding Box from Point Array

import { calculateBoundingBoxFromPoints, Point2D } from 'vjcad';

const points = [
  new Point2D(10, 20),
  new Point2D(50, 80),
  new Point2D(30, 10),
  new Point2D(90, 50)
];

const bbox = calculateBoundingBoxFromPoints(points);
console.log(bbox.minX);  // 10
console.log(bbox.maxX);  // 90
console.log(bbox.minY);  // 10
console.log(bbox.maxY);  // 80

Next Steps

Geometry Calculations - distances, angles, intersections
Intersection Calculation - intersections between entities
Selection Detection - selection-rectangle intersection tests