feat: multi-component-selector (#1728)
<!-- This is an auto-generated description by cubic. --> ## Summary by cubic Adds multi-component selection in the preview and sends all selected components to chat for targeted edits. Updates overlays, UI, and IPC to support arrays, smarter context focusing, and cross-platform path normalization. - **New Features** - Select multiple components in the iframe; selection mode stays active until you deactivate it. - Show a scrollable list of selections with remove buttons and a Clear all; remove from the list or click an overlay in the preview to deselect. Sending clears all overlays. - Separate hover vs selected overlays with labels on hover; overlays persist after deactivation and re-position on layout changes/resizes. - Chat input and streaming now send selectedComponents; server builds per-component snippets and focuses their files in smart context. - **Migration** - Replace selectedComponentPreviewAtom with selectedComponentsPreviewAtom (ComponentSelection[]). - ChatStreamParams now uses selectedComponents; migrate any single-selection usages. - previewIframeRefAtom added for clearing overlays from the parent. <sup>Written for commit da0d64cc9e9f83fbf4b975278f6c869f0d3a8c7d. Summary will update automatically on new commits.</sup> <!-- End of auto-generated description by cubic. -->
This commit is contained in:
Mohamed Aziz Mejri
committed by
GitHub
GitHub
parent
c4591996ea
commit
2a7f5a8909
@@ -1,7 +1,9 @@
|
||||
(() => {
|
||||
const OVERLAY_ID = "__dyad_overlay__";
|
||||
let overlay, label;
|
||||
|
||||
const OVERLAY_CLASS = "__dyad_overlay__";
|
||||
let overlays = [];
|
||||
let hoverOverlay = null;
|
||||
let hoverLabel = null;
|
||||
let currentHoveredElement = null;
|
||||
//detect if the user is using Mac
|
||||
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
|
||||
|
||||
@@ -15,8 +17,8 @@
|
||||
const css = (el, obj) => Object.assign(el.style, obj);
|
||||
|
||||
function makeOverlay() {
|
||||
overlay = document.createElement("div");
|
||||
overlay.id = OVERLAY_ID;
|
||||
const overlay = document.createElement("div");
|
||||
overlay.className = OVERLAY_CLASS;
|
||||
css(overlay, {
|
||||
position: "absolute",
|
||||
border: "2px solid #7f22fe",
|
||||
@@ -27,7 +29,7 @@
|
||||
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
|
||||
});
|
||||
|
||||
label = document.createElement("div");
|
||||
const label = document.createElement("div");
|
||||
css(label, {
|
||||
position: "absolute",
|
||||
left: "0",
|
||||
@@ -45,89 +47,231 @@
|
||||
});
|
||||
overlay.appendChild(label);
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
return { overlay, label };
|
||||
}
|
||||
|
||||
function updateOverlay(el, isSelected = false) {
|
||||
if (!overlay) makeOverlay();
|
||||
// If no element, hide hover overlay
|
||||
if (!el) {
|
||||
if (hoverOverlay) hoverOverlay.style.display = "none";
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSelected) {
|
||||
if (overlays.some((item) => item.el === el)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { overlay, label } = makeOverlay();
|
||||
overlays.push({ overlay, label, el });
|
||||
|
||||
const rect = el.getBoundingClientRect();
|
||||
css(overlay, {
|
||||
top: `${rect.top + window.scrollY}px`,
|
||||
left: `${rect.left + window.scrollX}px`,
|
||||
width: `${rect.width}px`,
|
||||
height: `${rect.height}px`,
|
||||
display: "block",
|
||||
border: "3px solid #7f22fe",
|
||||
background: "rgba(127, 34, 254, 0.05)",
|
||||
});
|
||||
|
||||
css(label, { display: "none" });
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise, this is a hover overlay: reuse the hover overlay node
|
||||
if (!hoverOverlay || !hoverLabel) {
|
||||
const o = makeOverlay();
|
||||
hoverOverlay = o.overlay;
|
||||
hoverLabel = o.label;
|
||||
}
|
||||
|
||||
const rect = el.getBoundingClientRect();
|
||||
css(overlay, {
|
||||
css(hoverOverlay, {
|
||||
top: `${rect.top + window.scrollY}px`,
|
||||
left: `${rect.left + window.scrollX}px`,
|
||||
width: `${rect.width}px`,
|
||||
height: `${rect.height}px`,
|
||||
display: "block",
|
||||
border: isSelected ? "3px solid #7f22fe" : "2px solid #7f22fe",
|
||||
background: isSelected
|
||||
? "rgba(127, 34, 254, 0.05)"
|
||||
: "rgba(0,170,255,.05)",
|
||||
border: "2px solid #7f22fe",
|
||||
background: "rgba(0,170,255,.05)",
|
||||
});
|
||||
|
||||
css(label, {
|
||||
background: "#7f22fe",
|
||||
});
|
||||
|
||||
// Clear previous contents
|
||||
while (label.firstChild) {
|
||||
label.removeChild(label.firstChild);
|
||||
}
|
||||
|
||||
if (isSelected) {
|
||||
const editLine = document.createElement("div");
|
||||
|
||||
const svgNS = "http://www.w3.org/2000/svg";
|
||||
const svg = document.createElementNS(svgNS, "svg");
|
||||
svg.setAttribute("width", "12");
|
||||
svg.setAttribute("height", "12");
|
||||
svg.setAttribute("viewBox", "0 0 16 16");
|
||||
svg.setAttribute("fill", "none");
|
||||
Object.assign(svg.style, {
|
||||
display: "inline-block",
|
||||
verticalAlign: "-2px",
|
||||
marginRight: "4px",
|
||||
});
|
||||
const path = document.createElementNS(svgNS, "path");
|
||||
path.setAttribute(
|
||||
"d",
|
||||
"M8 0L9.48528 6.51472L16 8L9.48528 9.48528L8 16L6.51472 9.48528L0 8L6.51472 6.51472L8 0Z",
|
||||
);
|
||||
path.setAttribute("fill", "white");
|
||||
svg.appendChild(path);
|
||||
|
||||
editLine.appendChild(svg);
|
||||
editLine.appendChild(document.createTextNode("Edit with AI"));
|
||||
label.appendChild(editLine);
|
||||
}
|
||||
|
||||
css(hoverLabel, { background: "#7f22fe" });
|
||||
while (hoverLabel.firstChild) hoverLabel.removeChild(hoverLabel.firstChild);
|
||||
const name = el.dataset.dyadName || "<unknown>";
|
||||
const file = (el.dataset.dyadId || "").split(":")[0];
|
||||
|
||||
const nameEl = document.createElement("div");
|
||||
nameEl.textContent = name;
|
||||
label.appendChild(nameEl);
|
||||
|
||||
hoverLabel.appendChild(nameEl);
|
||||
if (file) {
|
||||
const fileEl = document.createElement("span");
|
||||
css(fileEl, { fontSize: "10px", opacity: ".8" });
|
||||
fileEl.textContent = file;
|
||||
fileEl.textContent = file.replace(/\\/g, "/");
|
||||
hoverLabel.appendChild(fileEl);
|
||||
}
|
||||
|
||||
// Update positions after showing hover label in case it caused layout shift
|
||||
requestAnimationFrame(updateAllOverlayPositions);
|
||||
}
|
||||
|
||||
function updateAllOverlayPositions() {
|
||||
// Update all selected overlays
|
||||
overlays.forEach(({ overlay, el }) => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
css(overlay, {
|
||||
top: `${rect.top + window.scrollY}px`,
|
||||
left: `${rect.left + window.scrollX}px`,
|
||||
width: `${rect.width}px`,
|
||||
height: `${rect.height}px`,
|
||||
});
|
||||
});
|
||||
|
||||
// Update hover overlay if visible
|
||||
if (
|
||||
hoverOverlay &&
|
||||
hoverOverlay.style.display !== "none" &&
|
||||
state.element
|
||||
) {
|
||||
const rect = state.element.getBoundingClientRect();
|
||||
css(hoverOverlay, {
|
||||
top: `${rect.top + window.scrollY}px`,
|
||||
left: `${rect.left + window.scrollX}px`,
|
||||
width: `${rect.width}px`,
|
||||
height: `${rect.height}px`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function clearOverlays() {
|
||||
overlays.forEach(({ overlay }) => overlay.remove());
|
||||
overlays = [];
|
||||
|
||||
if (hoverOverlay) {
|
||||
hoverOverlay.remove();
|
||||
hoverOverlay = null;
|
||||
hoverLabel = null;
|
||||
}
|
||||
|
||||
currentHoveredElement = null;
|
||||
}
|
||||
|
||||
function removeOverlayById(componentId) {
|
||||
const index = overlays.findIndex(
|
||||
({ el }) => el.dataset.dyadId === componentId,
|
||||
);
|
||||
if (index !== -1) {
|
||||
const { overlay } = overlays[index];
|
||||
overlay.remove();
|
||||
overlays.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to show/hide and populate label for a selected overlay
|
||||
function updateSelectedOverlayLabel(item, show) {
|
||||
const { label, el } = item;
|
||||
|
||||
if (!show) {
|
||||
css(label, { display: "none" });
|
||||
// Update positions after hiding label in case it caused layout shift
|
||||
requestAnimationFrame(updateAllOverlayPositions);
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear and populate label
|
||||
css(label, { display: "block", background: "#7f22fe" });
|
||||
while (label.firstChild) label.removeChild(label.firstChild);
|
||||
|
||||
// Add "Edit with AI" line
|
||||
const editLine = document.createElement("div");
|
||||
const svgNS = "http://www.w3.org/2000/svg";
|
||||
const svg = document.createElementNS(svgNS, "svg");
|
||||
svg.setAttribute("width", "12");
|
||||
svg.setAttribute("height", "12");
|
||||
svg.setAttribute("viewBox", "0 0 16 16");
|
||||
svg.setAttribute("fill", "none");
|
||||
Object.assign(svg.style, {
|
||||
display: "inline-block",
|
||||
verticalAlign: "-2px",
|
||||
marginRight: "4px",
|
||||
});
|
||||
const path = document.createElementNS(svgNS, "path");
|
||||
path.setAttribute(
|
||||
"d",
|
||||
"M8 0L9.48528 6.51472L16 8L9.48528 9.48528L8 16L6.51472 9.48528L0 8L6.51472 6.51472L8 0Z",
|
||||
);
|
||||
path.setAttribute("fill", "white");
|
||||
svg.appendChild(path);
|
||||
editLine.appendChild(svg);
|
||||
editLine.appendChild(document.createTextNode("Edit with AI"));
|
||||
label.appendChild(editLine);
|
||||
|
||||
// Add component name and file
|
||||
const name = el.dataset.dyadName || "<unknown>";
|
||||
const file = (el.dataset.dyadId || "").split(":")[0];
|
||||
const nameEl = document.createElement("div");
|
||||
nameEl.textContent = name;
|
||||
label.appendChild(nameEl);
|
||||
if (file) {
|
||||
const fileEl = document.createElement("span");
|
||||
css(fileEl, { fontSize: "10px", opacity: ".8" });
|
||||
fileEl.textContent = file.replace(/\\/g, "/");
|
||||
label.appendChild(fileEl);
|
||||
}
|
||||
|
||||
// Update positions after showing label in case it caused layout shift
|
||||
requestAnimationFrame(updateAllOverlayPositions);
|
||||
}
|
||||
|
||||
/* ---------- event handlers -------------------------------------------- */
|
||||
function onMouseMove(e) {
|
||||
if (state.type !== "inspecting") return;
|
||||
|
||||
let el = e.target;
|
||||
while (el && !el.dataset.dyadId) el = el.parentElement;
|
||||
|
||||
if (state.element === el) return;
|
||||
state.element = el;
|
||||
const hoveredItem = overlays.find((item) => item.el === el);
|
||||
|
||||
if (el) {
|
||||
updateOverlay(el, false);
|
||||
} else {
|
||||
if (overlay) overlay.style.display = "none";
|
||||
if (currentHoveredElement && currentHoveredElement !== el) {
|
||||
const previousItem = overlays.find(
|
||||
(item) => item.el === currentHoveredElement,
|
||||
);
|
||||
if (previousItem) {
|
||||
updateSelectedOverlayLabel(previousItem, false);
|
||||
}
|
||||
}
|
||||
|
||||
currentHoveredElement = el;
|
||||
|
||||
// If hovering over a selected component, show its label
|
||||
if (hoveredItem) {
|
||||
updateSelectedOverlayLabel(hoveredItem, true);
|
||||
if (hoverOverlay) hoverOverlay.style.display = "none";
|
||||
}
|
||||
|
||||
// Handle inspecting state (component selector is active)
|
||||
if (state.type === "inspecting") {
|
||||
if (state.element === el) return;
|
||||
state.element = el;
|
||||
|
||||
if (!hoveredItem && el) {
|
||||
updateOverlay(el, false);
|
||||
} else if (!el) {
|
||||
if (hoverOverlay) hoverOverlay.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseLeave(e) {
|
||||
if (!e.relatedTarget) {
|
||||
if (hoverOverlay) {
|
||||
hoverOverlay.style.display = "none";
|
||||
requestAnimationFrame(updateAllOverlayPositions);
|
||||
}
|
||||
currentHoveredElement = null;
|
||||
if (state.type === "inspecting") {
|
||||
state.element = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -136,14 +280,30 @@
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
state = { type: "selected", element: state.element };
|
||||
const selectedItem = overlays.find((item) => item.el === e.target);
|
||||
if (selectedItem) {
|
||||
removeOverlayById(state.element.dataset.dyadId);
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "dyad-component-deselected",
|
||||
componentId: state.element.dataset.dyadId,
|
||||
},
|
||||
"*",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
updateOverlay(state.element, true);
|
||||
|
||||
requestAnimationFrame(updateAllOverlayPositions);
|
||||
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "dyad-component-selected",
|
||||
id: state.element.dataset.dyadId,
|
||||
name: state.element.dataset.dyadName,
|
||||
component: {
|
||||
id: state.element.dataset.dyadId,
|
||||
name: state.element.dataset.dyadName,
|
||||
},
|
||||
},
|
||||
"*",
|
||||
);
|
||||
@@ -177,25 +337,25 @@
|
||||
/* ---------- activation / deactivation --------------------------------- */
|
||||
function activate() {
|
||||
if (state.type === "inactive") {
|
||||
window.addEventListener("mousemove", onMouseMove, true);
|
||||
window.addEventListener("click", onClick, true);
|
||||
}
|
||||
state = { type: "inspecting", element: null };
|
||||
if (overlay) {
|
||||
overlay.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function deactivate() {
|
||||
if (state.type === "inactive") return;
|
||||
|
||||
window.removeEventListener("mousemove", onMouseMove, true);
|
||||
window.removeEventListener("click", onClick, true);
|
||||
if (overlay) {
|
||||
overlay.remove();
|
||||
overlay = null;
|
||||
label = null;
|
||||
// Don't clear overlays on deactivate - keep selected components visible
|
||||
// Hide only the hover overlay and all labels
|
||||
if (hoverOverlay) {
|
||||
hoverOverlay.style.display = "none";
|
||||
}
|
||||
|
||||
// Hide all labels when deactivating
|
||||
overlays.forEach((item) => updateSelectedOverlayLabel(item, false));
|
||||
currentHoveredElement = null;
|
||||
|
||||
state = { type: "inactive" };
|
||||
}
|
||||
|
||||
@@ -204,11 +364,25 @@
|
||||
if (e.source !== window.parent) return;
|
||||
if (e.data.type === "activate-dyad-component-selector") activate();
|
||||
if (e.data.type === "deactivate-dyad-component-selector") deactivate();
|
||||
if (e.data.type === "clear-dyad-component-overlays") clearOverlays();
|
||||
if (e.data.type === "remove-dyad-component-overlay") {
|
||||
if (e.data.componentId) {
|
||||
removeOverlayById(e.data.componentId);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Always listen for keyboard shortcuts
|
||||
window.addEventListener("keydown", onKeyDown, true);
|
||||
|
||||
// Always listen for mouse move to show/hide labels on selected overlays
|
||||
window.addEventListener("mousemove", onMouseMove, true);
|
||||
|
||||
document.addEventListener("mouseleave", onMouseLeave, true);
|
||||
|
||||
// Update overlay positions on window resize
|
||||
window.addEventListener("resize", updateAllOverlayPositions);
|
||||
|
||||
function initializeComponentSelector() {
|
||||
if (!document.body) {
|
||||
console.error(
|
||||
|
||||
Reference in New Issue
Block a user