@base44-preview/vite-plugin 0.3.3-pr.50.daf0b05 → 0.3.3-pr.51.07c7470

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

@@ -1,8 +1,10 @@
-import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget } from "./utils.js";
+import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel } from "./utils.js";
 import { createLayerController } from "./layer-dropdown/controller.js";
 import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 import { createInlineEditController } from "../capabilities/inline-edit/index.js";
 
+const REPOSITION_DELAY_MS = 50;
+
 export function setupVisualEditAgent() {
   // State variables (replacing React useState/useRef)
   let isVisualEditMode = false;
@@ -12,8 +14,7 @@ export function setupVisualEditAgent() {
   let selectedOverlays: HTMLDivElement[] = [];
   let currentHighlightedElements: Element[] = [];
   let selectedElementId: string | null = null;
-
-  const REPOSITION_DELAY_MS = 50;
+  let selectedElement: Element | null = null;
 
   // Create overlay element
   const createOverlay = (isSelected = false): HTMLDivElement => {
@@ -58,7 +59,6 @@ export function setupVisualEditAgent() {
       label = document.createElement("div");
       label.textContent = element.tagName.toLowerCase();
       label.style.position = "absolute";
-      label.style.top = "-27px";
       label.style.left = "-2px";
       label.style.padding = "2px 8px";
       label.style.fontSize = "11px";
@@ -70,6 +70,8 @@ export function setupVisualEditAgent() {
       label.style.textAlign = "center";
       overlay.appendChild(label);
     }
+
+    positionLabel(label, rect);
   };
 
   // --- Inline edit controller ---
@@ -82,6 +84,7 @@ export function setupVisualEditAgent() {
       inlineEdit.clearSelectedMarks(selectedElementId);
       clearSelectedOverlays();
       selectedElementId = null;
+      selectedElement = null;
     },
     createSelectionOverlays: (elements, elementId) => {
       elements.forEach((el) => {
@@ -98,6 +101,7 @@ export function setupVisualEditAgent() {
     inlineEdit.clearSelectedMarks(selectedElementId);
     clearSelectedOverlays();
     selectedElementId = null;
+    selectedElement = null;
   };
 
   // Clear hover overlays
@@ -180,6 +184,7 @@ export function setupVisualEditAgent() {
     });
 
     selectedElementId = visualSelectorId || null;
+    selectedElement = element;
     clearHoverOverlays();
     notifyElementSelected(element);
 
@@ -436,10 +441,9 @@ export function setupVisualEditAgent() {
   // Handle scroll events to update popover position
   const handleScroll = () => {
     if (selectedElementId) {
-      const elements = findElementsById(selectedElementId);
-      if (elements.length > 0) {
-        const element = elements[0];
-        const rect = element!.getBoundingClientRect();
+      const element = selectedElement;
+      if (element && element.isConnected) {
+        const rect = element.getBoundingClientRect();
 
         const viewportHeight = window.innerHeight;
         const viewportWidth = window.innerWidth;
@@ -543,41 +547,37 @@ export function setupVisualEditAgent() {
         break;
 
       case "request-element-position":
-        if (selectedElementId) {
-          const elements = findElementsById(selectedElementId);
-          if (elements.length > 0) {
-            const element = elements[0];
-            const rect = element!.getBoundingClientRect();
-
-            const viewportHeight = window.innerHeight;
-            const viewportWidth = window.innerWidth;
-            const isInViewport =
-              rect.top < viewportHeight &&
-              rect.bottom > 0 &&
-              rect.left < viewportWidth &&
-              rect.right > 0;
-
-            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,
-            };
-
-            window.parent.postMessage(
-              {
-                type: "element-position-update",
-                position: elementPosition,
-                isInViewport: isInViewport,
-                visualSelectorId: selectedElementId,
-              },
-              "*"
-            );
-          }
+        if (selectedElementId && selectedElement && selectedElement.isConnected) {
+          const rect = selectedElement.getBoundingClientRect();
+
+          const viewportHeight = window.innerHeight;
+          const viewportWidth = window.innerWidth;
+          const isInViewport =
+            rect.top < viewportHeight &&
+            rect.bottom > 0 &&
+            rect.left < viewportWidth &&
+            rect.right > 0;
+
+          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,
+          };
+
+          window.parent.postMessage(
+            {
+              type: "element-position-update",
+              position: elementPosition,
+              isInViewport: isInViewport,
+              visualSelectorId: selectedElementId,
+            },
+            "*"
+          );
         }
         break;