// Visual state primitives for DevTool
// Check visibility, viewport, and overlap
(function() {
'use strict';
var utils = window.__devtool_utils;
function isVisible(selector) {
var el = utils.resolveElement(selector);
if (!el) return { error: 'Element not found' };
try {
var computed = window.getComputedStyle(el);
var rect = utils.getRect(el);
if (!rect) {
return { visible: false, reason: 'No bounding rect' };
}
if (computed.display === 'none') {
return { visible: false, reason: 'display: none' };
}
if (computed.visibility === 'hidden') {
return { visible: false, reason: 'visibility: hidden' };
}
if (parseFloat(computed.opacity) === 0) {
return { visible: false, reason: 'opacity: 0' };
}
if (rect.width === 0 || rect.height === 0) {
return { visible: false, reason: 'zero size' };
}
return { visible: true, area: rect.width * rect.height };
} catch (e) {
return { error: e.message };
}
}
function isInViewport(selector) {
var el = utils.resolveElement(selector);
if (!el) return { error: 'Element not found' };
try {
var rect = utils.getRect(el);
if (!rect) return { error: 'Failed to get bounding rect' };
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
var intersecting = !(
rect.bottom < 0 ||
rect.top > viewportHeight ||
rect.right < 0 ||
rect.left > viewportWidth
);
var visibleWidth = Math.min(rect.right, viewportWidth) - Math.max(rect.left, 0);
var visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);
var visibleArea = Math.max(0, visibleWidth) * Math.max(0, visibleHeight);
var totalArea = rect.width * rect.height;
var ratio = totalArea > 0 ? visibleArea / totalArea : 0;
return {
intersecting: intersecting,
ratio: ratio,
rect: rect,
fullyVisible: ratio === 1
};
} catch (e) {
return { error: e.message };
}
}
function checkOverlap(selector1, selector2) {
var el1 = utils.resolveElement(selector1);
var el2 = utils.resolveElement(selector2);
if (!el1 || !el2) return { error: 'Element not found' };
try {
var rect1 = utils.getRect(el1);
var rect2 = utils.getRect(el2);
if (!rect1 || !rect2) return { error: 'Failed to get bounding rects' };
var overlaps = !(
rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom
);
if (!overlaps) {
return { overlaps: false };
}
var overlapLeft = Math.max(rect1.left, rect2.left);
var overlapRight = Math.min(rect1.right, rect2.right);
var overlapTop = Math.max(rect1.top, rect2.top);
var overlapBottom = Math.min(rect1.bottom, rect2.bottom);
var overlapArea = (overlapRight - overlapLeft) * (overlapBottom - overlapTop);
return {
overlaps: true,
area: overlapArea,
rect: {
left: overlapLeft,
right: overlapRight,
top: overlapTop,
bottom: overlapBottom
}
};
} catch (e) {
return { error: e.message };
}
}
// Export visual functions
window.__devtool_visual = {
isVisible: isVisible,
isInViewport: isInViewport,
checkOverlap: checkOverlap
};
})();
