vite-plugin-ai-annotator 1.1.26 → 1.1.28

package/dist/annotator/inspection.d.ts

@@ -1,5 +1,6 @@
 /**
  * Inspection Manager for mouse inspection mode handling
+ * Supports both single-click selection and drag-to-select multiple elements
  */
 export interface InspectionManager {
     enterInspectionMode(): void;
@@ -9,6 +10,7 @@ export interface InspectionManager {
 }
 export interface InspectionCallbacks {
     onElementSelect?: (element: Element) => void;
+    onMultiSelect?: (elements: Element[]) => void;
     shouldIgnoreElement?: (element: Element) => boolean;
     isElementSelected?: (element: Element) => boolean;
     onEscape?: () => void;

package/dist/annotator-toolbar.d.ts

@@ -44,6 +44,7 @@ export declare class AnnotatorToolbar extends LitElement {
     private injectJS;
     private getConsoleLogs;
     private handleElementSelected;
+    private handleMultiSelect;
     private removeSelectedElement;
     private showCommentPopoverForElement;
     private handlePopoverKeydown;

package/dist/annotator-toolbar.js

@@ -6706,11 +6706,15 @@
   }
 
   // src/annotator/inspection.ts
+  var DRAG_THRESHOLD = 5;
   function createInspectionManager(callbacks = {}) {
-    const { onElementSelect, shouldIgnoreElement, isElementSelected, onEscape, onCopy } = callbacks;
+    const { onElementSelect, onMultiSelect, shouldIgnoreElement, isElementSelected, onEscape, onCopy } = callbacks;
     let isInspecting = false;
     let currentHoveredElement = null;
     let inspectionStyleElement = null;
+    let selectionOverlay = null;
+    let dragState = { isDragging: false, startX: 0, startY: 0, currentX: 0, currentY: 0 };
+    let mouseDownTime = 0;
     function addInspectionStyles() {
       inspectionStyleElement = document.createElement("style");
       inspectionStyleElement.id = "annotator-toolbar-styles";
@@ -6718,6 +6722,8 @@
       * {
         pointer-events: none !important;
         cursor: crosshair !important;
+        user-select: none !important;
+        -webkit-user-select: none !important;
       }
       annotator-toolbar, annotator-toolbar *,
       .annotator-badge, .annotator-badge *,
@@ -6754,7 +6760,100 @@
       }
       return element;
     }
+    function createSelectionOverlay() {
+      const overlay = document.createElement("div");
+      overlay.className = "annotator-ignore";
+      overlay.style.cssText = `
+      position: fixed;
+      border: 2px dashed #00FFFF;
+      background: rgba(0, 255, 255, 0.1);
+      pointer-events: none;
+      z-index: 999999;
+      box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+    `;
+      document.body.appendChild(overlay);
+      return overlay;
+    }
+    function updateSelectionOverlay() {
+      if (!selectionOverlay) return;
+      const left = Math.min(dragState.startX, dragState.currentX);
+      const top = Math.min(dragState.startY, dragState.currentY);
+      const width = Math.abs(dragState.currentX - dragState.startX);
+      const height = Math.abs(dragState.currentY - dragState.startY);
+      selectionOverlay.style.left = `${left}px`;
+      selectionOverlay.style.top = `${top}px`;
+      selectionOverlay.style.width = `${width}px`;
+      selectionOverlay.style.height = `${height}px`;
+    }
+    function removeSelectionOverlay() {
+      if (selectionOverlay) {
+        selectionOverlay.remove();
+        selectionOverlay = null;
+      }
+    }
+    function getSelectionRect() {
+      const left = Math.min(dragState.startX, dragState.currentX);
+      const top = Math.min(dragState.startY, dragState.currentY);
+      const width = Math.abs(dragState.currentX - dragState.startX);
+      const height = Math.abs(dragState.currentY - dragState.startY);
+      return new DOMRect(left, top, width, height);
+    }
+    function isFullyContained(inner, outer) {
+      return inner.left >= outer.left && inner.right <= outer.right && inner.top >= outer.top && inner.bottom <= outer.bottom;
+    }
+    function findElementsFullyInRect(rect) {
+      if (inspectionStyleElement) {
+        inspectionStyleElement.disabled = true;
+      }
+      const elements = [];
+      const allElements = document.body.querySelectorAll("*");
+      for (const element of allElements) {
+        if (shouldIgnoreElement?.(element)) continue;
+        if (element.tagName === "SCRIPT" || element.tagName === "STYLE" || element.tagName === "NOSCRIPT") continue;
+        const elementRect = element.getBoundingClientRect();
+        if (elementRect.width === 0 || elementRect.height === 0) continue;
+        if (isFullyContained(elementRect, rect)) {
+          elements.push(element);
+        }
+      }
+      if (inspectionStyleElement) {
+        inspectionStyleElement.disabled = false;
+      }
+      return elements;
+    }
+    function filterLeafElements(elements) {
+      return elements.filter((el) => {
+        return !elements.some((other) => other !== el && el.contains(other));
+      });
+    }
+    function handleMouseDown(e5) {
+      const clickedElement = e5.target;
+      if (shouldIgnoreElement?.(clickedElement)) return;
+      mouseDownTime = Date.now();
+      dragState = {
+        isDragging: false,
+        startX: e5.clientX,
+        startY: e5.clientY,
+        currentX: e5.clientX,
+        currentY: e5.clientY
+      };
+    }
     function handleMouseMove(e5) {
+      if (mouseDownTime > 0) {
+        const dx = Math.abs(e5.clientX - dragState.startX);
+        const dy = Math.abs(e5.clientY - dragState.startY);
+        if (!dragState.isDragging && (dx > DRAG_THRESHOLD || dy > DRAG_THRESHOLD)) {
+          dragState.isDragging = true;
+          removeHoverHighlight();
+          selectionOverlay = createSelectionOverlay();
+        }
+        if (dragState.isDragging) {
+          dragState.currentX = e5.clientX;
+          dragState.currentY = e5.clientY;
+          updateSelectionOverlay();
+          return;
+        }
+      }
       const target = getElementAtPoint(e5.clientX, e5.clientY);
       if (!target || shouldIgnoreElement?.(target)) {
         removeHoverHighlight();
@@ -6766,19 +6865,38 @@
       target.style.outlineOffset = "2px";
       currentHoveredElement = target;
     }
-    function handleClick(e5) {
-      const clickedElement = e5.target;
-      if (shouldIgnoreElement?.(clickedElement)) return;
+    function handleMouseUp(e5) {
+      const wasDragging = dragState.isDragging;
+      if (wasDragging) {
+        removeSelectionOverlay();
+        const selectionRect = getSelectionRect();
+        if (selectionRect.width > 10 && selectionRect.height > 10) {
+          const elementsInRect = findElementsFullyInRect(selectionRect);
+          const leafElements = filterLeafElements(elementsInRect);
+          if (leafElements.length > 0) {
+            onMultiSelect?.(leafElements);
+          }
+        }
+      } else if (mouseDownTime > 0) {
+        const target = getElementAtPoint(e5.clientX, e5.clientY);
+        if (target && !shouldIgnoreElement?.(target)) {
+          onElementSelect?.(target);
+        }
+      }
+      mouseDownTime = 0;
+      dragState = { isDragging: false, startX: 0, startY: 0, currentX: 0, currentY: 0 };
+    }
+    function preventClick(e5) {
+      const target = e5.target;
+      if (shouldIgnoreElement?.(target)) return;
       e5.preventDefault();
       e5.stopPropagation();
       e5.stopImmediatePropagation();
-      const target = getElementAtPoint(e5.clientX, e5.clientY);
-      if (!target || shouldIgnoreElement?.(target)) return;
-      onElementSelect?.(target);
     }
     function preventMouseEvents(e5) {
       const target = e5.target;
       if (shouldIgnoreElement?.(target)) return;
+      if (dragState.isDragging) return;
       e5.preventDefault();
       e5.stopPropagation();
       e5.stopImmediatePropagation();
@@ -6797,15 +6915,20 @@
         }
       }
     }
+    function resetDragState() {
+      mouseDownTime = 0;
+      dragState = { isDragging: false, startX: 0, startY: 0, currentX: 0, currentY: 0 };
+      removeSelectionOverlay();
+    }
     return {
       enterInspectionMode() {
         if (isInspecting) return;
         isInspecting = true;
         addInspectionStyles();
+        document.addEventListener("mousedown", handleMouseDown, true);
         document.addEventListener("mousemove", handleMouseMove, true);
-        document.addEventListener("click", handleClick, true);
-        document.addEventListener("mousedown", preventMouseEvents, true);
-        document.addEventListener("mouseup", preventMouseEvents, true);
+        document.addEventListener("mouseup", handleMouseUp, true);
+        document.addEventListener("click", preventClick, true);
         document.addEventListener("dblclick", preventMouseEvents, true);
         document.addEventListener("contextmenu", preventMouseEvents, true);
         document.addEventListener("keydown", handleKeyDown);
@@ -6814,14 +6937,15 @@
         if (!isInspecting) return;
         isInspecting = false;
         removeInspectionStyles();
+        document.removeEventListener("mousedown", handleMouseDown, true);
         document.removeEventListener("mousemove", handleMouseMove, true);
-        document.removeEventListener("click", handleClick, true);
-        document.removeEventListener("mousedown", preventMouseEvents, true);
-        document.removeEventListener("mouseup", preventMouseEvents, true);
+        document.removeEventListener("mouseup", handleMouseUp, true);
+        document.removeEventListener("click", preventClick, true);
         document.removeEventListener("dblclick", preventMouseEvents, true);
         document.removeEventListener("contextmenu", preventMouseEvents, true);
         document.removeEventListener("keydown", handleKeyDown);
         removeHoverHighlight();
+        resetDragState();
       },
       isInInspectionMode() {
         return isInspecting;
@@ -6830,14 +6954,15 @@
         if (isInspecting) {
           isInspecting = false;
           removeInspectionStyles();
+          document.removeEventListener("mousedown", handleMouseDown, true);
           document.removeEventListener("mousemove", handleMouseMove, true);
-          document.removeEventListener("click", handleClick, true);
-          document.removeEventListener("mousedown", preventMouseEvents, true);
-          document.removeEventListener("mouseup", preventMouseEvents, true);
+          document.removeEventListener("mouseup", handleMouseUp, true);
+          document.removeEventListener("click", preventClick, true);
           document.removeEventListener("dblclick", preventMouseEvents, true);
           document.removeEventListener("contextmenu", preventMouseEvents, true);
           document.removeEventListener("keydown", handleKeyDown);
           removeHoverHighlight();
+          resetDragState();
         }
       }
     };
@@ -7395,6 +7520,7 @@
       });
       this.inspectionManager = createInspectionManager({
         onElementSelect: (element) => this.handleElementSelected(element),
+        onMultiSelect: (elements) => this.handleMultiSelect(elements),
         shouldIgnoreElement: (element) => this.shouldIgnoreElement(element),
         isElementSelected: (element) => this.selectionManager?.hasElement(element) || false,
         onEscape: () => this.exitInspectingMode(),
@@ -7563,12 +7689,12 @@
         if (type === "element" && selector) {
           const element = document.querySelector(selector);
           if (!element) {
-            console.error(`[AI Annotator] Element not found for selector: ${selector}`);
+            this.log(`Element not found for selector: ${selector}`);
             return { success: false, error: `Element not found: ${selector}` };
           }
           targetElement = element;
         }
-        console.log(`[AI Annotator] Capturing screenshot of ${type === "element" ? selector : "viewport"}`);
+        this.log(`Capturing screenshot of ${type === "element" ? selector : "viewport"}`);
         const blob = await toBlob(targetElement, {
           quality,
           type: "image/webp",
@@ -7576,10 +7702,10 @@
           skipFonts: true
         });
         if (!blob) {
-          console.error("[AI Annotator] toBlob returned null - screenshot capture failed");
+          this.log("toBlob returned null - screenshot capture failed");
           return { success: false, error: "Failed to capture screenshot (toBlob returned null)" };
         }
-        console.log(`[AI Annotator] Screenshot captured, blob size: ${blob.size} bytes`);
+        this.log(`Screenshot captured, blob size: ${blob.size} bytes`);
         const reader = new FileReader();
         const base64 = await new Promise((resolve, reject) => {
           reader.onload = () => {
@@ -7593,7 +7719,7 @@
         return { success: true, base64 };
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);
-        console.error(`[AI Annotator] Screenshot error: ${errorMessage}`, error);
+        this.log(`Screenshot error: ${errorMessage}`, error);
         return {
           success: false,
           error: errorMessage
@@ -7658,6 +7784,26 @@
         });
       }
     }
+    handleMultiSelect(elements) {
+      if (!this.selectionManager) return;
+      let newSelectCount = 0;
+      for (const element of elements) {
+        if (!this.selectionManager.hasElement(element)) {
+          this.selectionManager.selectElement(element, (el) => findNearestComponent(el, this.verbose));
+          newSelectCount++;
+        }
+      }
+      this.selectionCount = this.selectionManager.getSelectedCount();
+      if (newSelectCount > 0) {
+        this.showToast(`Selected ${newSelectCount} element(s)`);
+      }
+      if (this.socket?.connected) {
+        this.socket.emit("selectionChanged", {
+          count: this.selectionCount,
+          elements: this.getSelectedElements()
+        });
+      }
+    }
     removeSelectedElement() {
       if (!this.commentPopover.element || !this.selectionManager) return;
       const element = this.commentPopover.element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-ai-annotator",
-  "version": "1.1.26",
+  "version": "1.1.28",
   "description": "AI-powered element annotator for Vite - Pick elements and get instant AI code modifications",
   "type": "module",
   "main": "dist/vite-plugin.js",