pick-dom-element - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

dist/element-overlay.js

@@ -32,2 +32,3 @@ export default class ElementOverlay {
     removeFromDOM() {
+        this.setBounds({ x: 0, y: 0, width: 0, height: 0 });
         this.overlay.remove();
@@ -34,0 +35,0 @@ if (this.usingShadowDOM) {

dist/element-picker.d.ts

@@ -1,7 +0,8 @@
-declare type ElementCallback = (el: HTMLElement) => void;
+declare type ElementCallback<T> = (el: HTMLElement) => T;
 declare type ElementPickerOptions = {
     parentElement?: Node;
     useShadowDOM?: boolean;
-    onClick?: ElementCallback;
-    onHover?: ElementCallback;
+    onClick?: ElementCallback<void>;
+    onHover?: ElementCallback<void>;
+    elementFilter?: ElementCallback<boolean>;
 };
@@ -22,3 +23,4 @@ export default class ElementPicker {
     private tick;
+    private updateTarget;
 }
 export {};

dist/element-picker.js

@@ -17,17 +17,3 @@ import ElementOverlay from "./element-overlay";
         this.tick = () => {
-            var _a;
-            if (this.mouseX && this.mouseY) {
-                this.overlay.ignoreCursor();
-                const elAtCursor = document.elementFromPoint(this.mouseX, this.mouseY);
-                const newTarget = elAtCursor;
-                this.overlay.captureCursor();
-                if (newTarget && newTarget !== this.target) {
-                    this.target = newTarget;
-                    const bounds = getElementBounds(newTarget);
-                    this.overlay.setBounds(bounds);
-                    if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.onHover) {
-                        this.options.onHover(newTarget);
-                    }
-                }
-            }
+            this.updateTarget();
             this.tickReq = window.requestAnimationFrame(this.tick);
@@ -57,2 +43,5 @@ };
         this.overlay.removeFromDOM();
+        this.target = undefined;
+        this.mouseX = undefined;
+        this.mouseY = undefined;
         if (this.tickReq) {
@@ -62,2 +51,32 @@ window.cancelAnimationFrame(this.tickReq);
     }
+    updateTarget() {
+        var _a, _b;
+        if (this.mouseX === undefined || this.mouseY === undefined) {
+            return;
+        }
+        // Peek through the overlay to find the new target
+        this.overlay.ignoreCursor();
+        const elAtCursor = document.elementFromPoint(this.mouseX, this.mouseY);
+        const newTarget = elAtCursor;
+        this.overlay.captureCursor();
+        // If the target hasn't changed, there's nothing to do
+        if (!newTarget || newTarget === this.target) {
+            return;
+        }
+        // If we have an element filter and the new target doesn't match,
+        // clear out the target
+        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.elementFilter) {
+            if (!this.options.elementFilter(newTarget)) {
+                this.target = undefined;
+                this.overlay.setBounds({ x: 0, y: 0, width: 0, height: 0 });
+                return;
+            }
+        }
+        this.target = newTarget;
+        const bounds = getElementBounds(newTarget);
+        this.overlay.setBounds(bounds);
+        if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.onHover) {
+            this.options.onHover(newTarget);
+        }
+    }
 }

package.json

 {
   "name": "pick-dom-element",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Interactively pick elements in the DOM",
@@ -5,0 +5,0 @@ "author": "Harry Marr",

No alert changes

Improved metrics

Total package byte prevSize

7961

10.95%

Lines of code

187

13.33%

No dependency changes