@base44/vite-plugin 0.2.24 → 0.2.26

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

@@ -1,4 +1,6 @@
-import { findElementsById, updateElementClasses } from "./utils.js";
+import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, 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,76 @@ export function setupVisualEditAgent() {
     currentHighlightedElements = [];
   };
 
+  const clearSelectedOverlays = () => {
+    selectedOverlays.forEach((overlay) => {
+      if (overlay && overlay.parentNode) {
+        overlay.remove();
+      }
+    });
+    selectedOverlays = [];
+  };
+
+  const TEXT_TAGS = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'a', 'label'];
+
+  const notifyElementSelected = (element: Element) => {
+    const htmlElement = element as HTMLElement;
+    const rect = element.getBoundingClientRect();
+    const svgElement = element as SVGElement;
+    const isTextElement = TEXT_TAGS.includes(element.tagName?.toLowerCase());
+    window.parent.postMessage({
+      type: "element-selected",
+      tagName: element.tagName,
+      classes:
+        (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
+        element.className ||
+        "",
+      visualSelectorId: getElementSelectorId(element),
+      content: isTextElement ? htmlElement.innerText : undefined,
+      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,
+      },
+      attributes: collectAllowedAttributes(element, ALLOWED_ATTRIBUTES),
+      isTextElement,
+    }, "*");
+  };
+
+  // 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 notifyDeselection = (): void => {
+    selectedElementId = null;
+    window.parent.postMessage({ type: "unselect-element" }, "*");
+  };
+
   // Handle mouse over event
   const handleMouseOver = (e: MouseEvent) => {
     if (!isVisualEditMode || isPopoverDragging) return;
@@ -146,6 +218,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,79 +249,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,
-    };
-
-    const isTextElement = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'a', 'label'].includes(element.tagName?.toLowerCase())
-
-    // 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: isTextElement ? (element as HTMLElement).innerText : undefined,
-      dataSourceLocation: htmlElement.dataset.sourceLocation,
-      isDynamicContent: htmlElement.dataset.dynamicContent === "true",
-      linenumber: htmlElement.dataset.linenumber,
-      filename: htmlElement.dataset.filename,
-      position: elementPosition,
-      isTextElement: isTextElement,
-    };
-    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 = [];
+  // Clear the current selection
+  const clearSelection = () => {
+    clearSelectedOverlays();
     selectedElementId = null;
   };
 
@@ -282,6 +291,29 @@ export function setupVisualEditAgent() {
     }, 50);
   };
 
+  // Update element attribute by visual selector ID
+  const updateElementAttributeAndReposition = (
+    visualSelectorId: string,
+    attribute: string,
+    value: string
+  ) => {
+    const elements = findElementsById(visualSelectorId);
+    if (elements.length === 0) return;
+
+    updateElementAttribute(elements, attribute, value);
+
+    // Reposition overlays after attribute change (e.g. image src swap can affect layout)
+    setTimeout(() => {
+      if (selectedElementId === visualSelectorId) {
+        selectedOverlays.forEach((overlay, index) => {
+          if (index < elements.length) {
+            positionOverlay(overlay, elements[index]!);
+          }
+        });
+      }
+    }, 50);
+  };
+
   // Update element content by visual selector ID
   const updateElementContent = (visualSelectorId: string, content: string) => {
     const elements = findElementsById(visualSelectorId);
@@ -305,19 +337,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: notifyDeselection,
+  });
+
   // 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;
@@ -397,8 +438,28 @@ export function setupVisualEditAgent() {
         }
         break;
 
+      case "update-attribute":
+        if (
+          message.data &&
+          message.data.visualSelectorId &&
+          message.data.attribute !== undefined &&
+          message.data.value !== undefined
+        ) {
+          updateElementAttributeAndReposition(
+            message.data.visualSelectorId,
+            message.data.attribute,
+            message.data.value
+          );
+        } else {
+          console.warn(
+            "[VisualEditAgent] Invalid update-attribute message:",
+            message
+          );
+        }
+        break;
+
       case "unselect-element":
-        unselectElement();
+        clearSelection();
         break;
 
       case "refresh-page":