@tsparticles/move-parallax - npm Package Compare versions

Comparing version 3.0.0-alpha.1 to 3.0.0-beta.0

browser/index.js

 import { ParallaxMover } from "./ParallaxMover";
-export async function loadParallaxMover(engine) {
-    engine.addMover("parallax", () => new ParallaxMover());
+export async function loadParallaxMover(engine, refresh = true) {
+    await engine.addMover("parallax", () => new ParallaxMover(), refresh);
 }

browser/ParallaxMover.js

@@ -11,20 +11,20 @@ import { isSsr } from "@tsparticles/engine";
     move(particle) {
-        const container = particle.container, options = container.actualOptions;
-        if (isSsr() || !options.interactivity.events.onHover.parallax.enable) {
+        const container = particle.container, options = container.actualOptions, parallaxOptions = options.interactivity.events.onHover.parallax;
+        if (isSsr() || !parallaxOptions.enable) {
             return;
         }
-        const parallaxForce = options.interactivity.events.onHover.parallax.force, mousePos = container.interactivity.mouse.position;
+        const parallaxForce = parallaxOptions.force, mousePos = container.interactivity.mouse.position;
         if (!mousePos) {
             return;
         }
-        const canvasCenter = {
-            x: container.canvas.size.width / 2,
-            y: container.canvas.size.height / 2,
-        }, parallaxSmooth = options.interactivity.events.onHover.parallax.smooth, factor = particle.getRadius() / parallaxForce, centerDistance = {
+        const canvasSize = container.canvas.size, canvasCenter = {
+            x: canvasSize.width / 2,
+            y: canvasSize.height / 2,
+        }, parallaxSmooth = parallaxOptions.smooth, factor = particle.getRadius() / parallaxForce, centerDistance = {
             x: (mousePos.x - canvasCenter.x) * factor,
             y: (mousePos.y - canvasCenter.y) * factor,
-        };
-        particle.offset.x += (centerDistance.x - particle.offset.x) / parallaxSmooth;
-        particle.offset.y += (centerDistance.y - particle.offset.y) / parallaxSmooth;
+        }, { offset } = particle;
+        offset.x += (centerDistance.x - offset.x) / parallaxSmooth;
+        offset.y += (centerDistance.y - offset.y) / parallaxSmooth;
     }
 }

cjs/index.js

 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadParallaxMover = void 0;
 const ParallaxMover_1 = require("./ParallaxMover");
-function loadParallaxMover(engine) {
-    return __awaiter(this, void 0, void 0, function* () {
-        engine.addMover("parallax", () => new ParallaxMover_1.ParallaxMover());
-    });
+async function loadParallaxMover(engine, refresh = true) {
+    await engine.addMover("parallax", () => new ParallaxMover_1.ParallaxMover(), refresh);
 }
 exports.loadParallaxMover = loadParallaxMover;

cjs/ParallaxMover.js

@@ -14,21 +14,21 @@ "use strict";
     move(particle) {
-        const container = particle.container, options = container.actualOptions;
-        if ((0, engine_1.isSsr)() || !options.interactivity.events.onHover.parallax.enable) {
+        const container = particle.container, options = container.actualOptions, parallaxOptions = options.interactivity.events.onHover.parallax;
+        if ((0, engine_1.isSsr)() || !parallaxOptions.enable) {
             return;
         }
-        const parallaxForce = options.interactivity.events.onHover.parallax.force, mousePos = container.interactivity.mouse.position;
+        const parallaxForce = parallaxOptions.force, mousePos = container.interactivity.mouse.position;
         if (!mousePos) {
             return;
         }
-        const canvasCenter = {
-            x: container.canvas.size.width / 2,
-            y: container.canvas.size.height / 2,
-        }, parallaxSmooth = options.interactivity.events.onHover.parallax.smooth, factor = particle.getRadius() / parallaxForce, centerDistance = {
+        const canvasSize = container.canvas.size, canvasCenter = {
+            x: canvasSize.width / 2,
+            y: canvasSize.height / 2,
+        }, parallaxSmooth = parallaxOptions.smooth, factor = particle.getRadius() / parallaxForce, centerDistance = {
             x: (mousePos.x - canvasCenter.x) * factor,
             y: (mousePos.y - canvasCenter.y) * factor,
-        };
-        particle.offset.x += (centerDistance.x - particle.offset.x) / parallaxSmooth;
-        particle.offset.y += (centerDistance.y - particle.offset.y) / parallaxSmooth;
+        }, { offset } = particle;
+        offset.x += (centerDistance.x - offset.x) / parallaxSmooth;
+        offset.y += (centerDistance.y - offset.y) / parallaxSmooth;
     }
 }
 exports.ParallaxMover = ParallaxMover;

esm/index.js

 import { ParallaxMover } from "./ParallaxMover";
-export async function loadParallaxMover(engine) {
-    engine.addMover("parallax", () => new ParallaxMover());
+export async function loadParallaxMover(engine, refresh = true) {
+    await engine.addMover("parallax", () => new ParallaxMover(), refresh);
 }

esm/ParallaxMover.js

@@ -11,20 +11,20 @@ import { isSsr } from "@tsparticles/engine";
     move(particle) {
-        const container = particle.container, options = container.actualOptions;
-        if (isSsr() || !options.interactivity.events.onHover.parallax.enable) {
+        const container = particle.container, options = container.actualOptions, parallaxOptions = options.interactivity.events.onHover.parallax;
+        if (isSsr() || !parallaxOptions.enable) {
             return;
         }
-        const parallaxForce = options.interactivity.events.onHover.parallax.force, mousePos = container.interactivity.mouse.position;
+        const parallaxForce = parallaxOptions.force, mousePos = container.interactivity.mouse.position;
         if (!mousePos) {
             return;
         }
-        const canvasCenter = {
-            x: container.canvas.size.width / 2,
-            y: container.canvas.size.height / 2,
-        }, parallaxSmooth = options.interactivity.events.onHover.parallax.smooth, factor = particle.getRadius() / parallaxForce, centerDistance = {
+        const canvasSize = container.canvas.size, canvasCenter = {
+            x: canvasSize.width / 2,
+            y: canvasSize.height / 2,
+        }, parallaxSmooth = parallaxOptions.smooth, factor = particle.getRadius() / parallaxForce, centerDistance = {
             x: (mousePos.x - canvasCenter.x) * factor,
             y: (mousePos.y - canvasCenter.y) * factor,
-        };
-        particle.offset.x += (centerDistance.x - particle.offset.x) / parallaxSmooth;
-        particle.offset.y += (centerDistance.y - particle.offset.y) / parallaxSmooth;
+        }, { offset } = particle;
+        offset.x += (centerDistance.x - offset.x) / parallaxSmooth;
+        offset.y += (centerDistance.y - offset.y) / parallaxSmooth;
     }
 }

package.json

 {
   "name": "@tsparticles/move-parallax",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-beta.0",
   "description": "tsParticles Parallax movement",
@@ -48,8 +48,9 @@ "homepage": "https://particles.js.org",
   "types": "types/index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-beta.0"
+  },
   "publishConfig": {
     "access": "public"
-  },
-  "dependencies": {
-    "@tsparticles/engine": "^3.0.0-alpha.1"
   }
-}
+}

README.md

@@ -5,5 +5,5 @@ [![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-move-parallax/badge)](https://www.jsdelivr.com/package/npm/tsparticles-move-parallax)
-[![npmjs](https://badge.fury.io/js/tsparticles-move-parallax.svg)](https://www.npmjs.com/package/tsparticles-move-parallax)
-[![npmjs](https://img.shields.io/npm/dt/tsparticles-move-parallax)](https://www.npmjs.com/package/tsparticles-move-parallax) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/move-parallax/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/move-parallax)
+[![npmjs](https://badge.fury.io/js/@tsparticles/move-parallax.svg)](https://www.npmjs.com/package/@tsparticles/move-parallax)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/move-parallax)](https://www.npmjs.com/package/@tsparticles/move-parallax) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
@@ -46,3 +46,3 @@ [tsParticles](https://github.com/matteobruni/tsparticles) move plugin for parallax effect.
 ```shell
-$ npm install tsparticles-move-parallax
+$ npm install @tsparticles/move-parallax
 ```
@@ -53,3 +53,3 @@
 ```shell
-$ yarn add tsparticles-move-parallax
+$ yarn add @tsparticles/move-parallax
 ```
@@ -60,6 +60,8 @@
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
-const { loadParallaxMover } = require("tsparticles-move-parallax");
+const { tsParticles } = require("@tsparticles/engine");
+const { loadParallaxMover } = require("@tsparticles/move-parallax");
 
-loadParallaxMover(tsParticles); // awaitable
+(async () => {
+  await loadParallaxMover(tsParticles);
+})();
 ```
@@ -70,6 +72,8 @@
 ```javascript
-import { tsParticles } from "tsparticles-engine";
-import { loadParallaxMover } from "tsparticles-move-parallax";
+import { tsParticles } from "@tsparticles/engine";
+import { loadParallaxMover } from "@tsparticles/move-parallax";
 
-loadParallaxMover(tsParticles); // awaitable
+(async () => {
+  await loadParallaxMover(tsParticles);
+})();
 ```

tsparticles.move.parallax.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
+ * v3.0.0-beta.0
  */
@@ -95,3 +95,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 __webpack_require__.d(__webpack_exports__, {
-  "loadParallaxMover": () => (/* binding */ loadParallaxMover)
+  loadParallaxMover: () => (/* binding */ loadParallaxMover)
 });
@@ -110,7 +110,8 @@
     const container = particle.container,
-      options = container.actualOptions;
-    if ((0,engine_root_window_.isSsr)() || !options.interactivity.events.onHover.parallax.enable) {
+      options = container.actualOptions,
+      parallaxOptions = options.interactivity.events.onHover.parallax;
+    if ((0,engine_root_window_.isSsr)() || !parallaxOptions.enable) {
       return;
     }
-    const parallaxForce = options.interactivity.events.onHover.parallax.force,
+    const parallaxForce = parallaxOptions.force,
       mousePos = container.interactivity.mouse.position;
@@ -120,7 +121,8 @@ if (!mousePos) {
     }
-    const canvasCenter = {
-        x: container.canvas.size.width / 2,
-        y: container.canvas.size.height / 2
+    const canvasSize = container.canvas.size,
+      canvasCenter = {
+        x: canvasSize.width / 2,
+        y: canvasSize.height / 2
       },
-      parallaxSmooth = options.interactivity.events.onHover.parallax.smooth,
+      parallaxSmooth = parallaxOptions.smooth,
       factor = particle.getRadius() / parallaxForce,
@@ -130,5 +132,8 @@ centerDistance = {
         y: (mousePos.y - canvasCenter.y) * factor
-      };
-    particle.offset.x += (centerDistance.x - particle.offset.x) / parallaxSmooth;
-    particle.offset.y += (centerDistance.y - particle.offset.y) / parallaxSmooth;
+      },
+      {
+        offset
+      } = particle;
+    offset.x += (centerDistance.x - offset.x) / parallaxSmooth;
+    offset.y += (centerDistance.y - offset.y) / parallaxSmooth;
   }
@@ -138,4 +143,4 @@ }
 
-async function loadParallaxMover(engine) {
-  engine.addMover("parallax", () => new ParallaxMover());
+async function loadParallaxMover(engine, refresh = true) {
+  await engine.addMover("parallax", () => new ParallaxMover(), refresh);
 }
@@ -142,0 +147,0 @@ })();

tsparticles.move.parallax.min.js

 /*! For license information please see tsparticles.move.parallax.min.js.LICENSE.txt */
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var r="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{o.r(n),o.d(n,{loadParallaxMover:()=>r});var e=o(533);class t{init(){}isEnabled(t){return!(0,e.isSsr)()&&!t.destroyed&&t.container.actualOptions.interactivity.events.onHover.parallax.enable}move(t){const r=t.container,o=r.actualOptions;if((0,e.isSsr)()||!o.interactivity.events.onHover.parallax.enable)return;const n=o.interactivity.events.onHover.parallax.force,i=r.interactivity.mouse.position;if(!i)return;const a=r.canvas.size.width/2,s=r.canvas.size.height/2,l=o.interactivity.events.onHover.parallax.smooth,c=t.getRadius()/n,f=(i.x-a)*c,p=(i.y-s)*c;t.offset.x+=(f-t.offset.x)/l,t.offset.y+=(p-t.offset.y)/l}}async function r(e){e.addMover("parallax",(()=>new t))}})(),n})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var r="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{o.r(n),o.d(n,{loadParallaxMover:()=>r});var e=o(533);class t{init(){}isEnabled(t){return!(0,e.isSsr)()&&!t.destroyed&&t.container.actualOptions.interactivity.events.onHover.parallax.enable}move(t){const r=t.container,o=r.actualOptions.interactivity.events.onHover.parallax;if((0,e.isSsr)()||!o.enable)return;const n=o.force,i=r.interactivity.mouse.position;if(!i)return;const a=r.canvas.size,s=a.width/2,l=a.height/2,c=o.smooth,p=t.getRadius()/n,f=(i.x-s)*p,d=(i.y-l)*p,{offset:u}=t;u.x+=(f-u.x)/c,u.y+=(d-u.y)/c}}async function r(e,r=!0){await e.addMover("parallax",(()=>new t),r)}})(),n})()));

tsparticles.move.parallax.min.js.LICENSE.txt

@@ -1,8 +0,1 @@
-/*!
- * Author : Matteo Bruni
- * MIT license: https://opensource.org/licenses/MIT
- * Demo / Generator : https://particles.js.org/
- * GitHub : https://www.github.com/matteobruni/tsparticles
- * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
- */
+/*! tsParticles Parallax Move v3.0.0-beta.0 by Matteo Bruni */

types/index.d.ts

 import type { Engine } from "@tsparticles/engine";
-export declare function loadParallaxMover(engine: Engine): Promise<void>;
+export declare function loadParallaxMover(engine: Engine, refresh?: boolean): Promise<void>;

types/ParallaxMover.d.ts

@@ -1,2 +0,2 @@
-import type { IParticleMover, Particle } from "@tsparticles/engine";
+import { type IParticleMover, type Particle } from "@tsparticles/engine";
 export declare class ParallaxMover implements IParticleMover {
@@ -3,0 +3,0 @@ init(): void;

umd/index.js

@@ -14,6 +14,6 @@ (function (factory) {
     const ParallaxMover_1 = require("./ParallaxMover");
-    async function loadParallaxMover(engine) {
-        engine.addMover("parallax", () => new ParallaxMover_1.ParallaxMover());
+    async function loadParallaxMover(engine, refresh = true) {
+        await engine.addMover("parallax", () => new ParallaxMover_1.ParallaxMover(), refresh);
     }
     exports.loadParallaxMover = loadParallaxMover;
 });

umd/ParallaxMover.js

@@ -23,19 +23,19 @@ (function (factory) {
         move(particle) {
-            const container = particle.container, options = container.actualOptions;
-            if ((0, engine_1.isSsr)() || !options.interactivity.events.onHover.parallax.enable) {
+            const container = particle.container, options = container.actualOptions, parallaxOptions = options.interactivity.events.onHover.parallax;
+            if ((0, engine_1.isSsr)() || !parallaxOptions.enable) {
                 return;
             }
-            const parallaxForce = options.interactivity.events.onHover.parallax.force, mousePos = container.interactivity.mouse.position;
+            const parallaxForce = parallaxOptions.force, mousePos = container.interactivity.mouse.position;
             if (!mousePos) {
                 return;
             }
-            const canvasCenter = {
-                x: container.canvas.size.width / 2,
-                y: container.canvas.size.height / 2,
-            }, parallaxSmooth = options.interactivity.events.onHover.parallax.smooth, factor = particle.getRadius() / parallaxForce, centerDistance = {
+            const canvasSize = container.canvas.size, canvasCenter = {
+                x: canvasSize.width / 2,
+                y: canvasSize.height / 2,
+            }, parallaxSmooth = parallaxOptions.smooth, factor = particle.getRadius() / parallaxForce, centerDistance = {
                 x: (mousePos.x - canvasCenter.x) * factor,
                 y: (mousePos.y - canvasCenter.y) * factor,
-            };
-            particle.offset.x += (centerDistance.x - particle.offset.x) / parallaxSmooth;
-            particle.offset.y += (centerDistance.y - particle.offset.y) / parallaxSmooth;
+            }, { offset } = particle;
+            offset.x += (centerDistance.x - offset.x) / parallaxSmooth;
+            offset.y += (centerDistance.y - offset.y) / parallaxSmooth;
         }
@@ -42,0 +42,0 @@ }

No alert changes

Improved metrics

Number of lines in readme file

75

increased by5.63%

Worsened metrics

Total package byte prevSize

298174

decreased by-0.3%

Lines of code

313

decreased by-1.88%

Dependency changes

• Updated@tsparticles/engine@^3.0.0-beta.0