How DBSCAN Clustering Powers Automatic Layout Generation in Front‑End Design

Overview

Clustering groups similar objects into subsets. DBSCAN (Density‑Based Spatial Clustering of Applications with Noise) is a density‑based algorithm that can discover clusters of arbitrary shape and automatically label points that do not belong to any dense region as noise.

DBSCAN Algorithm

Core concepts

DBSCAN defines a dense region as a set of points where each point has at least MinPoints neighbours within a radius Eps . Points are classified as:

Core point : at least MinPoints points lie within its Eps neighbourhood.

Border point : not a core point but lies inside the Eps neighbourhood of a core point.

Noise point : neither core nor border.

Point relationships

Density‑directly‑reachable : a border point lies within the Eps neighbourhood of a core point.

Density‑reachable : a chain of directly reachable points connects two points.

Density‑connected : two points are mutually density‑reachable via a core point.

Non‑density‑connected : points belong to different clusters or are noise.

Algorithm steps

Select an unvisited core point as a seed.

Expand the cluster by adding all points density‑reachable from the seed.

Repeat with another unvisited core point.

Terminate when every point has been visited.

Combining DBSCAN with Layout Algorithms

In a design‑draft layout, each module is a rectangular block defined by its position and size. Instead of Euclidean point‑to‑point distance, the algorithm uses the shortest distance between two rectangles, computed as follows:

If the rectangles intersect, distance = 0.

If they are aligned horizontally or vertically, distance = gap between the adjacent edges.

If they are diagonal, distance = √(dx² + dy²) using the Pythagorean theorem.

Applying DBSCAN with these block‑to‑block distances groups spatially related modules into clusters.

Deriving a dynamic Eps

To choose an appropriate Eps for a given layout:

Compute the pairwise shortest distances between all modules and build a distance matrix.

For each module, record its minimum distance to any other module.

Remove outliers by applying a one‑standard‑deviation filter (e.g., keep values within mean + σ).

Example: distances = [5, 5, 5, 5, 100] → mean = 24, σ = 38 → Eps = mean + σ = 62, which separates the close‑together modules from the distant outlier.

Optimization for non‑uniform spacing

When horizontal and vertical gaps differ (e.g., horizontal = 5, vertical = 10), using only the raw minimum distances may produce an Eps that incorrectly splits rows. The algorithm therefore augments the sample set with both horizontal and vertical gap values before computing the standard deviation, yielding a more robust Eps .

Technical deployment

The method has been integrated into the Deco intelligent code‑generation system, which parses design drafts (Sketch, Photoshop) and automatically emits multi‑platform front‑end code (Taro, React, Vue). In production use, the approach has shown a measurable increase in development efficiency.

For further reference, see the Deco project repository and related documentation at https://deco-preview.jd.com/ and the DBSCAN tutorial at https://www.cnblogs.com/pinard/p/6208966.html.