@base44-preview/vite-plugin 0.2.26-pr.43.e9195be → 0.2.27-pr.41.77be9cb

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

@@ -1,625 +1 @@
-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)
-  let isVisualEditMode = false;
-  let isPopoverDragging = false;
-  let isDropdownOpen = false;
-  let hoverOverlays: HTMLDivElement[] = [];
-  let selectedOverlays: HTMLDivElement[] = [];
-  let currentHighlightedElements: Element[] = [];
-  let selectedElementId: string | null = null;
-
-  // Create overlay element
-  const createOverlay = (isSelected = false): HTMLDivElement => {
-    const overlay = document.createElement("div");
-    overlay.style.position = "absolute";
-    overlay.style.pointerEvents = "none";
-    overlay.style.transition = "all 0.1s ease-in-out";
-    overlay.style.zIndex = "9999";
-
-    if (isSelected) {
-      overlay.style.border = "2px solid #2563EB";
-    } else {
-      overlay.style.border = "2px solid #95a5fc";
-      overlay.style.backgroundColor = "rgba(99, 102, 241, 0.05)";
-    }
-
-    return overlay;
-  };
-
-  // Position overlay relative to element
-  const positionOverlay = (
-    overlay: HTMLDivElement,
-    element: Element,
-    isSelected = false
-  ) => {
-    if (!element || !isVisualEditMode) return;
-
-    const htmlElement = element as HTMLElement;
-    // Force layout recalculation
-    void htmlElement.offsetWidth;
-
-    const rect = element.getBoundingClientRect();
-    overlay.style.top = `${rect.top + window.scrollY}px`;
-    overlay.style.left = `${rect.left + window.scrollX}px`;
-    overlay.style.width = `${rect.width}px`;
-    overlay.style.height = `${rect.height}px`;
-
-    // Check if label already exists in overlay
-    let label = overlay.querySelector("div") as HTMLDivElement | null;
-
-    if (!label) {
-      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";
-      label.style.fontWeight = isSelected ? "500" : "400";
-      label.style.color = isSelected ? "#ffffff" : "#526cff";
-      label.style.backgroundColor = isSelected ? "#526cff" : "#DBEAFE";
-      label.style.borderRadius = "3px";
-      label.style.minWidth = "24px";
-      label.style.textAlign = "center";
-      overlay.appendChild(label);
-    }
-  };
-
-  // Clear hover overlays
-  const clearHoverOverlays = () => {
-    hoverOverlays.forEach((overlay) => {
-      if (overlay && overlay.parentNode) {
-        overlay.remove();
-      }
-    });
-    hoverOverlays = [];
-    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;
-
-    const target = e.target as Element;
-
-    // Prevent hover effects when a dropdown is open
-    if (isDropdownOpen) {
-      clearHoverOverlays();
-      return;
-    }
-
-    // Prevent hover effects on SVG path elements
-    if (target.tagName.toLowerCase() === "path") {
-      clearHoverOverlays();
-      return;
-    }
-
-    // Support both data-source-location and data-visual-selector-id
-    const element = target.closest(
-      "[data-source-location], [data-visual-selector-id]"
-    );
-    if (!element) {
-      clearHoverOverlays();
-      return;
-    }
-
-    // Prefer data-source-location, fallback to data-visual-selector-id
-    const htmlElement = element as HTMLElement;
-    const selectorId =
-      htmlElement.dataset.sourceLocation ||
-      htmlElement.dataset.visualSelectorId;
-
-    // Skip if this element is already selected
-    if (selectedElementId === selectorId) {
-      clearHoverOverlays();
-      return;
-    }
-
-    // Find all elements with the same ID
-    const elements = findElementsById(selectorId || null);
-
-    // Clear previous hover overlays
-    clearHoverOverlays();
-
-    // Create overlays for all matching elements
-    elements.forEach((el) => {
-      const overlay = createOverlay(false);
-      document.body.appendChild(overlay);
-      hoverOverlays.push(overlay);
-      positionOverlay(overlay, el);
-    });
-
-    currentHighlightedElements = elements;
-  };
-
-  // Handle mouse out event
-  const handleMouseOut = () => {
-    if (isPopoverDragging) return;
-    clearHoverOverlays();
-  };
-
-  // Handle element click
-  const handleElementClick = (e: MouseEvent) => {
-    if (!isVisualEditMode) return;
-
-    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();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-
-      window.parent.postMessage({ type: "close-dropdowns" }, "*");
-      return;
-    }
-
-    // Prevent clicking on SVG path elements
-    if (target.tagName.toLowerCase() === "path") {
-      return;
-    }
-
-    // Prevent default behavior immediately when in visual edit mode
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-
-    // Support both data-source-location and data-visual-selector-id
-    const element = target.closest(
-      "[data-source-location], [data-visual-selector-id]"
-    );
-    if (!element) {
-      return;
-    }
-
-    const selectedOverlay = selectElement(element);
-    layerController.attachToOverlay(selectedOverlay, element);
-  };
-
-  // Clear the current selection
-  const clearSelection = () => {
-    clearSelectedOverlays();
-    selectedElementId = null;
-  };
-
-  const updateElementClassesAndReposition = (visualSelectorId: string, classes: string) => {
-    const elements = findElementsById(visualSelectorId);
-    if (elements.length === 0) return;
-
-    updateElementClasses(elements, classes);
-
-    // Use a small delay to allow the browser to recalculate layout before repositioning
-    setTimeout(() => {
-      // Reposition selected overlays
-      if (selectedElementId === visualSelectorId) {
-        selectedOverlays.forEach((overlay, index) => {
-          if (index < elements.length) {
-            positionOverlay(overlay, elements[index]!);
-          }
-        });
-      }
-
-      // Reposition hover overlays if needed
-      if (currentHighlightedElements.length > 0) {
-        const hoveredElement = currentHighlightedElements[0] as HTMLElement;
-        const hoveredId = hoveredElement?.dataset?.visualSelectorId;
-        if (hoveredId === visualSelectorId) {
-          hoverOverlays.forEach((overlay, index) => {
-            if (index < currentHighlightedElements.length) {
-              positionOverlay(overlay, currentHighlightedElements[index]!);
-            }
-          });
-        }
-      }
-    }, 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);
-
-    if (elements.length === 0) {
-      return;
-    }
-
-    elements.forEach((element) => {
-      (element as HTMLElement).innerText = content;
-    });
-
-    setTimeout(() => {
-      if (selectedElementId === visualSelectorId) {
-        selectedOverlays.forEach((overlay, index) => {
-          if (index < elements.length) {
-            positionOverlay(overlay, elements[index]!);
-          }
-        });
-      }
-    }, 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();
-      clearSelectedOverlays();
-
-      currentHighlightedElements = [];
-      selectedElementId = null;
-      document.body.style.cursor = "default";
-
-      document.removeEventListener("mouseover", handleMouseOver);
-      document.removeEventListener("mouseout", handleMouseOut);
-      document.removeEventListener("click", handleElementClick, true);
-    } else {
-      document.body.style.cursor = "crosshair";
-      document.addEventListener("mouseover", handleMouseOver);
-      document.addEventListener("mouseout", handleMouseOut);
-      document.addEventListener("click", handleElementClick, true);
-    }
-  };
-
-  // 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 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,
-          },
-          "*"
-        );
-      }
-    }
-  };
-
-  // Handle messages from parent window
-  const handleMessage = (event: MessageEvent) => {
-    const message = event.data;
-
-    switch (message.type) {
-      case "toggle-visual-edit-mode":
-        toggleVisualEditMode(message.data.enabled);
-        break;
-
-      case "update-classes":
-        if (message.data && message.data.classes !== undefined) {
-          updateElementClassesAndReposition(
-            message.data.visualSelectorId,
-            message.data.classes
-          );
-        } else {
-          console.warn(
-            "[VisualEditAgent] Invalid update-classes message:",
-            message
-          );
-        }
-        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":
-        clearSelection();
-        break;
-
-      case "refresh-page":
-        window.location.reload();
-        break;
-
-      case "update-content":
-        if (message.data && message.data.content !== undefined) {
-          updateElementContent(
-            message.data.visualSelectorId,
-            message.data.content
-          );
-        } else {
-          console.warn(
-            "[VisualEditAgent] Invalid update-content message:",
-            message
-          );
-        }
-        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,
-              },
-              "*"
-            );
-          }
-        }
-        break;
-
-      case "popover-drag-state":
-        if (message.data && message.data.isDragging !== undefined) {
-          isPopoverDragging = message.data.isDragging;
-          if (message.data.isDragging) {
-            clearHoverOverlays();
-          }
-        }
-        break;
-
-      case "dropdown-state":
-        if (message.data && message.data.isOpen !== undefined) {
-          isDropdownOpen = message.data.isOpen;
-          if (message.data.isOpen) {
-            clearHoverOverlays();
-          }
-        }
-        break;
-
-      default:
-        break;
-    }
-  };
-
-  // Handle window resize to reposition overlays
-  const handleResize = () => {
-    if (selectedElementId) {
-      const elements = findElementsById(selectedElementId);
-      selectedOverlays.forEach((overlay, index) => {
-        if (index < elements.length) {
-          positionOverlay(overlay, elements[index]!);
-        }
-      });
-    }
-
-    if (currentHighlightedElements.length > 0) {
-      hoverOverlays.forEach((overlay, index) => {
-        if (index < currentHighlightedElements.length) {
-          positionOverlay(overlay, currentHighlightedElements[index]!);
-        }
-      });
-    }
-  };
-
-  // Initialize: Add IDs to elements that don't have them but have linenumbers
-  const elementsWithLineNumber = document.querySelectorAll(
-    "[data-linenumber]:not([data-visual-selector-id])"
-  );
-  elementsWithLineNumber.forEach((el, index) => {
-    const htmlEl = el as HTMLElement;
-    const id = `visual-id-${htmlEl.dataset.filename}-${htmlEl.dataset.linenumber}-${index}`;
-    htmlEl.dataset.visualSelectorId = id;
-  });
-
-  // Create mutation observer to detect layout changes
-  const mutationObserver = new MutationObserver((mutations) => {
-    const needsUpdate = mutations.some((mutation) => {
-      const hasVisualId = (node: Node): boolean => {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-          const el = node as HTMLElement;
-          if (el.dataset && el.dataset.visualSelectorId) {
-            return true;
-          }
-          for (let i = 0; i < el.children.length; i++) {
-            if (hasVisualId(el.children[i]!)) {
-              return true;
-            }
-          }
-        }
-        return false;
-      };
-
-      const isLayoutChange =
-        mutation.type === "attributes" &&
-        (mutation.attributeName === "style" ||
-          mutation.attributeName === "class" ||
-          mutation.attributeName === "width" ||
-          mutation.attributeName === "height");
-
-      return isLayoutChange && hasVisualId(mutation.target);
-    });
-
-    if (needsUpdate) {
-      setTimeout(handleResize, 50);
-    }
-  });
-
-  // Set up event listeners
-  window.addEventListener("message", handleMessage);
-  window.addEventListener("scroll", handleScroll, true);
-  document.addEventListener("scroll", handleScroll, true);
-  window.addEventListener("resize", handleResize);
-  window.addEventListener("scroll", handleResize);
-
-  // Start observing DOM mutations
-  mutationObserver.observe(document.body, {
-    attributes: true,
-    childList: true,
-    subtree: true,
-    attributeFilter: ["style", "class", "width", "height"],
-  });
-
-  // Send ready message to parent
-  window.parent.postMessage({ type: "visual-edit-agent-ready" }, "*");
-}
+export { setupVisualEditAgent } from "./visual-edit-agent/index.js";