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

Comparing version 0.0.13 to 0.0.14

dist/index.js

@@ -52,2 +52,5 @@ const hasChild = (parent, el) => {
     // }
+    /**
+     * @class Overlay
+     */
     constructor() {
@@ -83,2 +86,8 @@ this.element = document.createElement('div');
     // }
+    /**
+     *
+     */
+    get color() {
+        return this.style.color;
+    }
     set color(color) {
@@ -90,5 +99,5 @@ this.style.color = color;
     }
-    get color() {
-        return this.style.color;
-    }
+    /**
+     *
+     */
     get borderRadius() {
@@ -103,2 +112,5 @@ return this.style.borderRadius;
     }
+    /**
+     * @returns {number}
+     */
     get zIndex() {
@@ -113,5 +125,13 @@ return this.style.zIndex;
     }
+    /**
+     * @returns {HTMLDivElement}
+     */
     getElement() {
         return this.element;
     }
+    /**
+     * @param rect
+     *
+     * @returns {void}
+     */
     setRect(rect) {
@@ -144,2 +164,5 @@ if (rect) {
     }
+    /**
+     *
+     */
     mount() {
@@ -155,2 +178,5 @@ const { element, disableEventsElement } = this;
     }
+    /**
+     *
+     */
     destroy() {
@@ -179,5 +205,34 @@ const { element, disableEventsElement } = this;
 
+class Rect {
+    /**
+     * @param {number=} x
+     * @param {number=} y
+     * @param {number=} width
+     * @param {number=} height
+     * @property {number} x
+     * @property {number} y
+     * @property {number} width
+     * @property {number} height
+     */
+    constructor(x = 0, y = 0, width = 0, height = 0) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+    }
+}
+
 const { MAX_SAFE_INTEGER } = Number;
 class BoxOverlay {
+    /**
+     * @class BoxOverlay
+     *
+     * @param handleUpdate {Function=}
+     */
     constructor(handleUpdate = (rect) => { }) {
+        /**
+         * @public
+         * @readonly
+         * @property {Overlay} overlay
+         */
         this.overlay = new Overlay();
@@ -189,8 +244,29 @@ this.elementsOrSelectors = [];
     }
+    /**
+     *
+     * @param selectorOrElement {Element|string}
+     */
     add(selectorOrElement) {
         this.elementsOrSelectors.push(selectorOrElement);
     }
+    /**
+     *
+     */
     clear() {
         this.elementsOrSelectors = [];
     }
+    /**
+     *
+     */
+    start() {
+        this.watch();
+    }
+    /**
+     *
+     */
+    stop() {
+        cancelAnimationFrame(this.requestAnimationFrameId);
+        this.requestAnimationFrameId = -1;
+        this.overlay.destroy();
+    }
     getElements() {
@@ -210,12 +286,4 @@ return this.elementsOrSelectors.reduce((elements, selectorOrElement) => {
         const domRect = element.getBoundingClientRect();
-        return domRect;
+        return new Rect(domRect.left, domRect.top, domRect.width, domRect.height);
     }
-    start() {
-        this.watch();
-    }
-    stop() {
-        cancelAnimationFrame(this.requestAnimationFrameId);
-        this.requestAnimationFrameId = -1;
-        this.overlay.destroy();
-    }
     watch() {
@@ -229,3 +297,3 @@ const rect = this.calcBox();
                 if (!this.rect) {
-                    this.rect = new DOMRect(rect.x, rect.y, rect.width, rect.height);
+                    this.rect = new Rect(rect.x, rect.y, rect.width, rect.height);
                 }
@@ -232,0 +300,0 @@ else {

package.json

 {
   "name": "@spb-web/box-overlay",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "no dependencies, works with animated elements, simple api, typescript, modern, can highlight multiple elements",
@@ -8,5 +8,12 @@ "main": "dist/index.js",
   "scripts": {
-    "build": "rollup --config rollup.config.js",
+    "build": "rm ./types -rf && rollup --config rollup.config.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build-demo": "rollup --config rollup.demo.config.js"
+    "build-demo": "rollup --config rollup.demo.config.js",
+    "docs": "jsdoc -c jsdoc.json",
+    "release:major": "changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version major && git push origin && git push origin --tags",
+    "release:minor": "changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version minor && git push origin && git push origin --tags",
+    "release:patch": "changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags",
+    "cy:run": "cypress run",
+    "cy:open": "cypress open",
+    "cy:record": "cypress run --record --key aa8d9545-e85e-4aaf-9a36-1ef6ce7bde04"
   },
@@ -16,3 +23,9 @@ "author": "",
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-typescript": "^5.0.2",
+    "better-docs": "^2.3.0",
+    "cypress": "^5.0.0",
+    "generate-changelog": "^1.8.0",
+    "highlight.js": "^10.1.2",
+    "jsdoc": "^3.6.5",
     "rollup": "^2.26.3",
@@ -19,0 +32,0 @@ "tslib": "^2.0.1",

readme.md

 # Main Hero Magic to highlight yourself!
+
+[![@spb-web/box-overlay](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/2ztf48/master&style=flat&logo=cypress&color=%234cc61f)](https://dashboard.cypress.io/projects/2ztf48/runs)
+[![<@spb-web/box-overlay>](https://circleci.com/gh/spb-web/boxOverlay/tree/master.svg?style=shield)](<https://circleci.com/gh/spb-web/boxOverlay/tree/master>)
+[![GitHub issues](https://img.shields.io/github/issues/spb-web/boxOverlay?color=%234cc61f)](https://github.com/spb-web/boxOverlay/issues)
+
 no dependencies, works with animated elements, simple api,
 typescript, modern, can highlight multiple elements
 
-[Demo and docs](https://spb-web.github.io/boxOverlay/)
+[Demo](https://spb-web.github.io/boxOverlay/) |
+[Docs](https://spb-web.github.io/boxOverlay/docs/) |
+[Issues](https://github.com/spb-web/boxOverlay/issues)
 
-```npm i @spbweb/box-overlay --save```
 
+## 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)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@spb-web/box-overlay?color=%234cc61f)](https://www.npmjs.com/package/@spb-web/box-overlay)
+[![npm version](https://img.shields.io/npm/v/@spb-web/box-overlay?color=%234cc61f)](https://www.npmjs.com/package/@spb-web/box-overlay)
+
 ```
+npm i @spb-web/box-overlay --save
+```
+
+## Example
+
+```js
 const boxOverlay = new BoxOverlay()
@@ -30,1 +47,13 @@
 ```
+
+## TODO:
+- [x] Highlight multiple elements
+- [x] Handle moving elements
+- [x] Rounded corner
+- [ ] Tests
+- [ ] Stylization with css
+- [ ] Animation
+- [ ] Capture mouse/touch events
+- [ ] Use clip-path
+- [ ] Centrating highlighted area
+- [ ] Optimize scroll

types/BoxOverlay.d.ts

 import { Overlay } from './Overlay';
+import { Rect } from './Rect';
 export declare class BoxOverlay {
-    overlay: Overlay;
-    constructor(handleUpdate?: (rect: DOMRect | null) => void);
+    /**
+     * @public
+     * @readonly
+     * @property {Overlay} overlay
+     */
+    readonly overlay: Overlay;
+    /**
+     * @class BoxOverlay
+     *
+     * @param handleUpdate {Function=}
+     */
+    constructor(handleUpdate?: (rect: Rect | null) => void);
     private handleUpdate;
@@ -9,10 +20,23 @@ private elementsOrSelectors;
     private requestAnimationFrameId;
+    /**
+     *
+     * @param selectorOrElement {Element|string}
+     */
     add(selectorOrElement: Element | string): void;
+    /**
+     *
+     */
     clear(): void;
+    /**
+     *
+     */
+    start(): void;
+    /**
+     *
+     */
+    stop(): void;
     private getElements;
     private getPosition;
-    start(): void;
-    stop(): void;
     private watch;
     private calcBox;
 }

types/Overlay.d.ts

@@ -0,17 +1,44 @@
+import { Rect } from './Rect';
 export declare class Overlay {
     private element;
     private disableEventsElement;
+    /**
+     * @class Overlay
+     */
     constructor();
     private style;
+    /**
+     *
+     */
+    get color(): string;
     set color(color: string);
-    get color(): string;
+    /**
+     *
+     */
     get borderRadius(): number;
     set borderRadius(radius: number);
+    /**
+     * @returns {number}
+     */
     get zIndex(): number;
     set zIndex(zIndex: number);
+    /**
+     * @returns {HTMLDivElement}
+     */
     getElement(): HTMLDivElement;
-    setRect(rect: DOMRect | null): void;
+    /**
+     * @param rect
+     *
+     * @returns {void}
+     */
+    setRect(rect: Rect | null): void;
+    /**
+     *
+     */
     mount(): void;
+    /**
+     *
+     */
     destroy(): void;
     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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Number of lines in readme file

58

increased by93.33%

Worsened metrics

Total package byte prevSize

15699

decreased by-63.3%

Dev dependency count

10

increased by150%

Number of package files

9

decreased by-47.06%

Lines of code

439

decreased by-58.9%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes