@base44-preview/vite-plugin 0.2.21-pr.35.60ab963 → 0.2.22-pr.36.16dc064

package/src/injections/visual-edit-agent.ts

@@ -1,4 +1,6 @@
-import { findElementsById, updateElementClasses } from "./utils.js";
+import { findElementsById, updateElementClasses, getElementSelectorId } from "./utils.js";
+import { createLayerController } from "./layer-dropdown/controller.js";
+import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 
 export function setupVisualEditAgent() {
   // State variables (replacing React useState/useRef)
@@ -78,6 +80,71 @@ export function setupVisualEditAgent() {
     currentHighlightedElements = [];
   };
 
+  const clearSelectedOverlays = () => {
+    selectedOverlays.forEach((overlay) => {
+      if (overlay && overlay.parentNode) {
+        overlay.remove();
+      }
+    });
+    selectedOverlays = [];
+  };
+
+  const notifyElementSelected = (element: Element) => {
+    const htmlElement = element as HTMLElement;
+    const rect = element.getBoundingClientRect();
+    const svgElement = element as SVGElement;
+    window.parent.postMessage({
+      type: "element-selected",
+      tagName: element.tagName,
+      classes:
+        (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
+        element.className ||
+        "",
+      visualSelectorId: getElementSelectorId(element),
+      content: htmlElement.innerText,
+      dataSourceLocation: htmlElement.dataset.sourceLocation,
+      isDynamicContent: htmlElement.dataset.dynamicContent === "true",
+      linenumber: htmlElement.dataset.linenumber,
+      filename: htmlElement.dataset.filename,
+      position: {
+        top: rect.top,
+        left: rect.left,
+        right: rect.right,
+        bottom: rect.bottom,
+        width: rect.width,
+        height: rect.height,
+        centerX: rect.left + rect.width / 2,
+        centerY: rect.top + rect.height / 2,
+      },
+    }, "*");
+  };
+
+  // Select an element: create overlays, update state, notify parent
+  const selectElement = (element: Element): HTMLDivElement | undefined => {
+    const visualSelectorId = getElementSelectorId(element);
+
+    clearSelectedOverlays();
+
+    const elements = findElementsById(visualSelectorId || null);
+    elements.forEach((el) => {
+      const overlay = createOverlay(true);
+      document.body.appendChild(overlay);
+      selectedOverlays.push(overlay);
+      positionOverlay(overlay, el, true);
+    });
+
+    selectedElementId = visualSelectorId || null;
+    clearHoverOverlays();
+    notifyElementSelected(element);
+
+    return selectedOverlays[0];
+  };
+
+  const unSelectElement = (): void => {
+    selectedElementId = null;
+    window.parent.postMessage({ type: "unselect-element" }, "*");
+  };
+
   // Handle mouse over event
   const handleMouseOver = (e: MouseEvent) => {
     if (!isVisualEditMode || isPopoverDragging) return;
@@ -146,6 +213,9 @@ export function setupVisualEditAgent() {
 
     const target = e.target as Element;
 
+    // Let layer dropdown clicks pass through without interference
+    if (target.closest(`[${LAYER_DROPDOWN_ATTR}]`)) return;
+
     // Close dropdowns when clicking anywhere in iframe if a dropdown is open
     if (isDropdownOpen) {
       e.preventDefault();
@@ -174,76 +244,13 @@ export function setupVisualEditAgent() {
       return;
     }
 
-    const htmlElement = element as HTMLElement;
-    const visualSelectorId =
-      htmlElement.dataset.sourceLocation ||
-      htmlElement.dataset.visualSelectorId;
-
-    // Clear any existing selected overlays
-    selectedOverlays.forEach((overlay) => {
-      if (overlay && overlay.parentNode) {
-        overlay.remove();
-      }
-    });
-    selectedOverlays = [];
-
-    // Find all elements with the same ID
-    const elements = findElementsById(visualSelectorId || null);
-
-    // Create selected overlays for all matching elements
-    elements.forEach((el) => {
-      const overlay = createOverlay(true);
-      document.body.appendChild(overlay);
-      selectedOverlays.push(overlay);
-      positionOverlay(overlay, el, true);
-    });
-
-    selectedElementId = visualSelectorId || null;
-
-    // Clear hover overlays
-    clearHoverOverlays();
-
-    // Calculate element position for popover positioning
-    const rect = element.getBoundingClientRect();
-    const elementPosition = {
-      top: rect.top,
-      left: rect.left,
-      right: rect.right,
-      bottom: rect.bottom,
-      width: rect.width,
-      height: rect.height,
-      centerX: rect.left + rect.width / 2,
-      centerY: rect.top + rect.height / 2,
-    };
-
-    // Send message to parent window with element info including position
-    const svgElement = element as SVGElement;
-    const elementData = {
-      type: "element-selected",
-      tagName: element.tagName,
-      classes:
-        (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
-        element.className ||
-        "",
-      visualSelectorId: visualSelectorId,
-      content: (element as HTMLElement).innerText,
-      dataSourceLocation: htmlElement.dataset.sourceLocation,
-      isDynamicContent: htmlElement.dataset.dynamicContent === "true",
-      linenumber: htmlElement.dataset.linenumber,
-      filename: htmlElement.dataset.filename,
-      position: elementPosition,
-    };
-    window.parent.postMessage(elementData, "*");
+    const selectedOverlay = selectElement(element);
+    layerController.attachToOverlay(selectedOverlay, element);
   };
 
   // Unselect the current element
   const unselectElement = () => {
-    selectedOverlays.forEach((overlay) => {
-      if (overlay && overlay.parentNode) {
-        overlay.remove();
-      }
-    });
-    selectedOverlays = [];
+    clearSelectedOverlays();
     selectedElementId = null;
   };
 
@@ -302,19 +309,28 @@ export function setupVisualEditAgent() {
     }, 50);
   };
 
+  // --- Layer dropdown controller ---
+  const layerController = createLayerController({
+    createPreviewOverlay: (element: Element) => {
+      const overlay = createOverlay(false);
+      overlay.style.zIndex = "9998";
+      document.body.appendChild(overlay);
+      positionOverlay(overlay, element);
+      return overlay;
+    },
+    getSelectedElementId: () => selectedElementId,
+    selectElement,
+    onDeselect: unSelectElement,
+  });
+
   // Toggle visual edit mode
   const toggleVisualEditMode = (isEnabled: boolean) => {
     isVisualEditMode = isEnabled;
 
     if (!isEnabled) {
+      layerController.cleanup();
       clearHoverOverlays();
-
-      selectedOverlays.forEach((overlay) => {
-        if (overlay && overlay.parentNode) {
-          overlay.remove();
-        }
-      });
-      selectedOverlays = [];
+      clearSelectedOverlays();
 
       currentHighlightedElements = [];
       selectedElementId = null;