Skip to content

feat: implement Spatial Integrity Filter for zero-overlap layouts #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
google-labs-jules wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: implement Spatial Integrity Filter for zero-overlap layouts #27

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 26 additions & 7 deletions skills/utils/design-simulator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ function calculatePerceptualContrast(fgLightness, bgLightness) {
function estimateElementCoordinates(elements) {
const mapped = [];
let currentY = 20;
let maxY = 20;

for (let i = 0; i < elements.length; i++) {
const el = elements[i];
Expand All @@ -118,45 +119,64 @@ function estimateElementCoordinates(elements) {
h = 70;
currentY += 80;
} else if (el.tag === 'footer') {
y = 720;
y = Math.max(720, maxY + 20);
h = 60;
currentY = y + 80;
} else if (el.classes.includes('bento') || el.classes.includes('grid') || el.classes.includes('card')) {
// Simulate asymmetric grid columns for Bento cells
const cardIndex = mapped.filter(m => m.tag === el.tag && m.classes.includes('card')).length;
const cardIndex = mapped.filter(m => m.classes.includes('bento') || m.classes.includes('grid') || m.classes.includes('card')).length;
w = 380;
h = 240;
x = 40 + (cardIndex % 3) * 400;
y = currentY + Math.floor(cardIndex / 3) * 260;

// If it's the first card in the grid, we start at currentY
// If it's a new row, we push down
const row = Math.floor(cardIndex / 3);
y = currentY + row * 260;

// Update Y tracking if we wrap grid rows
if (cardIndex > 0 && cardIndex % 3 === 0) {
currentY += 260;
// We only increase currentY by 260 when a new row begins
// but we need to ensure the grid's total height is accounted for.
// It's easier to just use maxY.
}
} else if (el.tag === 'h1' || el.tag === 'h2') {
// Make sure we start below any grid
y = Math.max(currentY, maxY + 20);
currentY = y;
w = 800;
h = 50;
currentY += 60;
} else if (el.tag === 'p') {
y = Math.max(currentY, maxY + 10);
currentY = y;
w = 600;
h = 40;
currentY += 50;
} else if (el.hasInteractive) {
y = Math.max(currentY, maxY + 10);
currentY = y;
w = 180;
h = 44;
x = 40;
currentY += 50;
} else {
y = Math.max(currentY, maxY + 10);
currentY = y;
h = 20;
currentY += 30;
}

// Keep within bounds
x = Math.max(0, Math.min(x, 1280));
y = Math.max(0, Math.min(y, 800));

mapped.push({
...el,
x, y, w, h
});

// Track the lowest point reached by any element
maxY = Math.max(maxY, y + h);
}

return mapped;
Expand Down Expand Up @@ -958,8 +978,7 @@ function main() {
const el1 = mappedElements[i];
const el2 = mappedElements[j];

if (!el1.hasInteractive || !el2.hasInteractive) continue;

// Check for spatial collisions between all elements
const overlapX = el1.x < el2.x + el2.w && el1.x + el1.w > el2.x;
const overlapY = el1.y < el2.y + el2.h && el1.y + el1.h > el2.y;

Expand Down