@spb-web/box-overlay - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

.size-limit.js

@@ -5,4 +5,4 @@ module.exports = [
     import: "{ BoxOverlay }",
-    limit: "100 ms"
+    limit: "150 ms"
   }
 ]

CHANGELOG.md

@@ -1,15 +0,18 @@
-### 0.2.0 (2020-09-03)
+#### 0.2.2 (2020-09-03)
 
 ##### Chores
 
-*  update dist ([0ad3f093](https://github.com/spb-web/boxOverlay/commit/0ad3f09336c963a394d9f071c1705e36de89e928))
+*  update size limit ([bfeda0d6](https://github.com/spb-web/boxOverlay/commit/bfeda0d6404080297c767b174b3025be38a5364e))
+*  update .npmignore ([73f556a3](https://github.com/spb-web/boxOverlay/commit/73f556a32ae88e929f10f33ba2058f38d22a23d5))
+*  update readme, CHANGELOG.md ([a8d2072f](https://github.com/spb-web/boxOverlay/commit/a8d2072fc8edce88d0030be676d33d5a043d0395))
 
 ##### New Features
 
-*  update docs ([c7b18a3d](https://github.com/spb-web/boxOverlay/commit/c7b18a3d14c379800caaded972ab60aebb8b66a0))
-*  added size-limit ([662b8487](https://github.com/spb-web/boxOverlay/commit/662b84877f6f4230f49861d8e19d399f7e64a53e))
-*  added nanoevents ([07ab1cb7](https://github.com/spb-web/boxOverlay/commit/07ab1cb79b5b48cb8423f66bff84852e072b6227))
-*  added .npmignore ([bc59258a](https://github.com/spb-web/boxOverlay/commit/bc59258a5b4e4a417c73fb8757aa12bfeea37b93))
-*  added sample spec ([cdf9d21f](https://github.com/spb-web/boxOverlay/commit/cdf9d21fd1129650b7fa7da428803f66df9f8a15))
+*  update docs ([80ab0f43](https://github.com/spb-web/boxOverlay/commit/80ab0f43a705bf75930bb4af061a6be9176bbede))
+*  added control mouse events, used clip-path ([abb7e061](https://github.com/spb-web/boxOverlay/commit/abb7e061eafdc3aba34d0cf69211e45ac66d5968))
 
+##### Bug Fixes
+
+*  fixed demo ([85a05a1e](https://github.com/spb-web/boxOverlay/commit/85a05a1eb5e9ed0d0763fb42674aaf7b86911a4a))
+
 ### 0.2.0 (2020-09-03)
@@ -16,0 +19,0 @@

dist/index.js

@@ -33,23 +33,20 @@ import { createNanoEvents } from 'nanoevents';
 
-const disableMouseEvents = (event) => {
-    event.stopPropagation();
-};
-const EVENTS_LIST = [
-    'click',
-    'mousedown',
-    'mouseenter',
-    'mouseleave',
-    'mousemove',
-    'mouseout',
-    'mouseover',
-    'mouseup',
-    'touchcancel',
-    'touchend',
-    'touchmove',
-    'touchstart',
-];
+// const disableMouseEvents = (event:Event) => {
+//   event.stopPropagation()
+// }
+// const EVENTS_LIST:(keyof GlobalEventHandlersEventMap)[] = [
+//   'click',
+//   'mousedown',
+//   'mouseenter',
+//   'mouseleave',
+//   'mousemove',
+//   'mouseout',
+//   'mouseover',
+//   'mouseup',
+//   'touchcancel',
+//   'touchend',
+//   'touchmove',
+//   'touchstart',
+// ]
 class Overlay {
-    // private option = {
-    //   disableEvents: false,
-    // }
     /**
@@ -61,2 +58,6 @@ * @class Overlay
         this.disableEventsElement = document.createElement('div');
+        this.data = {
+            disableMouseEvents: true,
+            rect: null,
+        };
         this.style = {
@@ -78,5 +79,9 @@ color: 'rgba(0,0,0,.5)',
         });
-        EVENTS_LIST.forEach(eventName => {
-            disableEventsElement.addEventListener(eventName, disableMouseEvents, { passive: true, capture: true });
-        });
+        // EVENTS_LIST.forEach(eventName => {
+        //   disableEventsElement.addEventListener(
+        //     eventName,
+        //     disableMouseEvents,
+        //     { passive: true, capture: true },
+        //   )
+        // })
         this.applyStyle();
@@ -126,35 +131,15 @@ }
     }
-    /**
-     * @returns {HTMLDivElement}
-     */
-    getElement() {
-        return this.element;
+    set disableMouseEvents(isDisable) {
+        this.data.disableMouseEvents = isDisable;
+        if (this.rect) {
+            this.updateRect(this.rect);
+        }
     }
-    /**
-     * @param rect
-     *
-     * @returns {void}
-     */
-    setRect(rect) {
+    get disableMouseEvents() {
+        return this.data.disableMouseEvents;
+    }
+    set rect(rect) {
+        this.data.rect = rect;
         if (rect) {
-            this.mount();
-            applyStyle(this.element, {
-                transform: `translate(${rect.x}px, ${rect.y}px)`,
-                width: `${rect.width}px`,
-                height: `${rect.height}px`
-            });
-            // const clipPath = this.disableEvents 
-            //   ? 'none'
-            //   : 'polygon(0% 0%, 0 100%,'
-            //     + `${rect.x}px 100%,`
-            //     + `${rect.x}px ${rect.y}px,`
-            //     + `${rect.x + rect.width}px ${rect.y}px,`
-            //     + `${rect.x + rect.width}px ${rect.y + rect.height}px,`
-            //     + `${rect.x}px ${rect.y + rect.height}px,`
-            //     + `${rect.x}px 100%,`
-            //     + '100% 100%, 100% 0%)'
-            // applyStyle(
-            //   this.disableEventsElement, 
-            //   { clipPath: clipPath, },
-            // )
+            this.updateRect(rect);
         }
@@ -165,3 +150,12 @@ else {
     }
+    get rect() {
+        return this.data.rect;
+    }
     /**
+     * @returns {HTMLDivElement}
+     */
+    getElement() {
+        return this.element;
+    }
+    /**
      *
@@ -192,2 +186,26 @@ */
     }
+    updateRect(rect) {
+        this.mount();
+        applyStyle(this.element, {
+            transform: `translate(${rect.x}px, ${rect.y}px)`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`
+        });
+        const disableEventsElementStyle = {
+            clipPath: 'none',
+            willСhange: 'none',
+        };
+        if (!this.disableMouseEvents) {
+            disableEventsElementStyle.clipPath = 'polygon(0% 0%, 0 100%,'
+                + `${rect.x}px 100%,`
+                + `${rect.x}px ${rect.y}px,`
+                + `${rect.x + rect.width}px ${rect.y}px,`
+                + `${rect.x + rect.width}px ${rect.y + rect.height}px,`
+                + `${rect.x}px ${rect.y + rect.height}px,`
+                + `${rect.x}px 100%,`
+                + '100% 100%, 100% 0%)';
+            disableEventsElementStyle.willСhange = 'clip-path';
+        }
+        applyStyle(this.disableEventsElement, disableEventsElementStyle);
+    }
     applyStyle() {
@@ -306,3 +324,3 @@ const { style } = this;
             }
-            this.overlay.setRect(this.rect);
+            this.overlay.rect = this.rect;
             /**
@@ -309,0 +327,0 @@ * Called when the position or size of the highlight area has

package.json

 {
   "name": "@spb-web/box-overlay",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "no dependencies, works with animated elements, simple api, typescript, modern, can highlight multiple elements",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

readme.md

@@ -14,4 +14,2 @@ # Main Hero Magic to highlight yourself!
 
-
-## Install 
 [![npm bundle size](https://img.shields.io/bundlephobia/min/@spb-web/box-overlay?color=%234cc61f)](https://www.npmjs.com/package/@spb-web/box-overlay)
@@ -23,2 +21,4 @@ [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@spb-web/box-overlay?color=%234cc61f)](https://www.npmjs.com/package/@spb-web/box-overlay)
 
+## Install 
+
 ```
@@ -58,2 +58,3 @@ npm i @spb-web/box-overlay --save
 - [x] Add events
+- [x] Control mouse events
 - [ ] Tests
@@ -63,4 +64,4 @@ - [ ] Stylization with css
 - [ ] Capture mouse/touch events
-- [ ] Use clip-path
+- [x] Use clip-path
 - [ ] Centrating highlighted area
 - [ ] Optimize scroll

types/Overlay.d.ts

@@ -5,2 +5,3 @@ import { Rect } from './Rect';
     private disableEventsElement;
+    private data;
     /**
@@ -26,2 +27,6 @@ * @class Overlay
     set zIndex(zIndex: number);
+    set disableMouseEvents(isDisable: boolean);
+    get disableMouseEvents(): boolean;
+    set rect(rect: Rect | null);
+    get rect(): Rect | null;
     /**
@@ -32,10 +37,4 @@ * @returns {HTMLDivElement}
     /**
-     * @param rect
      *
-     * @returns {void}
      */
-    setRect(rect: Rect | null): void;
-    /**
-     *
-     */
     mount(): void;
@@ -46,3 +45,4 @@ /**
     destroy(): void;
+    private updateRect;
     private applyStyle;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18919

increased by2.49%

Lines of code

478

increased by3.91%

Number of lines in readme file

63

increased by1.61%

Worsened metrics

Number of package files

10

decreased by-9.09%

No dependency changes