// Overlay management system for DevTool
// Handles visual overlays, highlights, and labels
(function() {
'use strict';
var utils = window.__devtool_utils;
// Overlay state
var overlayState = {
container: null,
overlays: {},
highlights: {},
labels: {},
nextId: 1
};
function initOverlayContainer() {
if (overlayState.container) return overlayState.container;
var container = document.createElement('div');
container.id = '__devtool-overlays';
container.style.cssText = [
'position: fixed',
'top: 0',
'left: 0',
'right: 0',
'bottom: 0',
'pointer-events: none',
'z-index: 2147483647',
'overflow: hidden'
].join(';');
document.documentElement.appendChild(container);
overlayState.container = container;
return container;
}
function removeOverlayContainer() {
if (overlayState.container && overlayState.container.parentNode) {
overlayState.container.parentNode.removeChild(overlayState.container);
overlayState.container = null;
}
}
function createOverlayElement(type, config) {
var el = document.createElement('div');
el.className = '__devtool-overlay-' + type;
el.style.position = 'absolute';
el.style.pointerEvents = 'none';
return el;
}
function highlight(selector, config) {
var el = utils.resolveElement(selector);
if (!el) return { error: 'Element not found' };
config = config || {};
var color = config.color || 'rgba(0, 123, 255, 0.3)';
var duration = config.duration;
var id = 'highlight-' + overlayState.nextId++;
try {
initOverlayContainer();
var rect = utils.getRect(el);
var highlightEl = createOverlayElement('highlight', config);
highlightEl.id = id;
highlightEl.style.cssText += [
'top: ' + rect.top + 'px',
'left: ' + rect.left + 'px',
'width: ' + rect.width + 'px',
'height: ' + rect.height + 'px',
'background-color: ' + color,
'border: 2px solid ' + (config.borderColor || '#007bff'),
'box-sizing: border-box'
].join(';');
overlayState.container.appendChild(highlightEl);
overlayState.highlights[id] = highlightEl;
if (duration) {
setTimeout(function() {
removeHighlight(id);
}, duration);
}
return { highlightId: id };
} catch (e) {
return { error: e.message };
}
}
function removeHighlight(highlightId) {
var highlightEl = overlayState.highlights[highlightId];
if (highlightEl && highlightEl.parentNode) {
highlightEl.parentNode.removeChild(highlightEl);
delete overlayState.highlights[highlightId];
}
}
function clearAllOverlays() {
overlayState.overlays = {};
overlayState.highlights = {};
overlayState.labels = {};
if (overlayState.container) {
removeOverlayContainer();
}
}
// Export overlay functions
window.__devtool_overlay = {
state: overlayState,
initContainer: initOverlayContainer,
removeContainer: removeOverlayContainer,
createOverlayElement: createOverlayElement,
highlight: highlight,
removeHighlight: removeHighlight,
clearAllOverlays: clearAllOverlays
};
})();
