How to Implement Alignment Features in a Graphics Editor

Hello, I'm Frontend Xigua. This article explains the approach to implementing alignment features in a graphics editor.

Alignment Feature

The alignment functionality is built on axis‑aligned bounding boxes (AABB) for each shape.

Editor GitHub address: https://github.com/F-star/suika Online demo: https://blog.fstars.wang/app/suika/

First, select multiple shapes; a single shape has no reference point, so its displacement would be zero.

Compute the AABB for each shape. An AABB (axis‑aligned bounding box) is a rectangle whose four edges are parallel to the coordinate axes.

Shapes with rotation use an oriented bounding box (OBB), which fits more tightly but requires extra handling for collision detection.

The AABB structure is represented as:

interface IBox2 {
  minX: number;
  minY: number;
  maxX: number;
  maxY: number;
}

After calculating all AABBs, compute a combined bounding box (named mixedBBox ) that serves as the alignment reference.

Left Alignment

Align the left edge of every shape's AABB with the left edge of mixedBBox:

for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  const dx = mixedBBox.minX - bBoxes[i].minX;
  el.x += dx;
}

Horizontal Alignment (Center)

Align the vertical center lines of the shapes with the vertical center line of mixedBBox:

const centerX = mixedBBox.minX / 2 + mixedBBox.maxX / 2;
for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  const dx = centerX - (bBoxes[i].minX / 2 + bBoxes[i].maxX / 2);
  el.x += dx;
}

Right Alignment

Align the right edge of each shape's AABB with the right edge of mixedBBox:

for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  const dx = mixedBBox.maxX - bBoxes[i].maxX;
  el.x += dx;
}

Top Alignment

for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  const dy = mixedBBox.minY - bBoxes[i].minY;
  el.y += dy;
}

Vertical Alignment (Middle)

Align the horizontal center lines of the shapes with the horizontal center line of mixedBBox:

for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  dy = centerY - (bBoxes[i].minY / 2 + bBoxes[i].maxY / 2);
  el.y += dy;
}

Bottom Alignment

for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  const dy = mixedBBox.maxY - bBoxes[i].maxY;
  el.y += dy;
}

Conclusion

If the editor also has a stage, you can select a single shape and use the stage's bounding box as mixedBBox for alignment.

Developing a graphics tool involves many simple geometry algorithms; solving them brings a strong sense of achievement.