Skip to content

Commit

Permalink
fix: manual particles optional position, now they can be random posit…
Browse files Browse the repository at this point in the history 
…ioned with custom options
  • Loading branch information
@matteobruni
matteobruni committed Oct 6, 2020
1 parent 806cb88 commit 0f67407
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 27 deletions.
31 changes: 16 additions & 15 deletions core/main/markdown/Options.md
View file
@@ -1,20 +1,21 @@
# **_Options_**

| property | option type | example | notes |
| ---------------- | ------------------ | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `autoPlay` | `boolean` | `true` / `false` | |
| `background` | `object` | | See Background options {@link IBackground | here} |
| `backgroundMask` | `object` | | See Background Mask options {@link IBackgroundMask | here} |
| `backgroundMode` | `object` | | See Background Mode options {@link IBackgroundMode | here} |
| `detectRetina` | `boolean` | `true` / `false` | Replaces the old `retina_detect` property |
| `fpsLimit` | `number` | `30` | _Defaults to `30`_, replaces the old `fps_limit` property |
| `infection` | `object` | | See Infection options {@link IInfection | here} |
| `interactivity` | `object` | | See Interactivity options {@link IInteractivity | here} |
| `motion` | `object` | | See Motion options {@link IMotion | here} |
| `particles` | `object` | | See Particles options {@link IParticles | here} |
| `pauseOnBlur` | `boolean` | `true` / `false` | Pauses the animations when the page isn't on foreground |
| `preset` | `string` / `array` | `"basic"`<br /> `[ "basic", "60fps" ]` | You can use this property to load one or more presets for focusing on important properties and not all config. You can find presets on `npm` [here](https://www.npmjs.com/search?q=tsparticles-preset) |
| `themes` | `array` | | It's an array of Theme object, you can see the structure {@link ITheme | here } |
| property | option type | example | notes |
| ----------------- | ------------------ | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `autoPlay` | `boolean` | `true` / `false` | |
| `background` | `object` | | See Background options {@link IBackground | here} |
| `backgroundMask` | `object` | | See Background Mask options {@link IBackgroundMask | here} |
| `backgroundMode` | `object` | | See Background Mode options {@link IBackgroundMode | here} |
| `detectRetina` | `boolean` | `true` / `false` | Replaces the old `retina_detect` property |
| `fpsLimit` | `number` | `30` | _Defaults to `30`_, replaces the old `fps_limit` property |
| `infection` | `object` | | See Infection options {@link IInfection | here} |
| `interactivity` | `object` | | See Interactivity options {@link IInteractivity | here} |
| `manualParticles` | `array` | | An array of Manual Particles object. See Manual Particles documentation {@link IManualParticle | here} |
| `motion` | `object` | | See Motion options {@link IMotion | here} |
| `particles` | `object` | | See Particles options {@link IParticles | here} |
| `pauseOnBlur` | `boolean` | `true` / `false` | Pauses the animations when the page isn't on foreground |
| `preset` | `string` / `array` | `"basic"`<br /> `[ "basic", "60fps" ]` | You can use this property to load one or more presets for focusing on important properties and not all config. You can find presets on `npm` [here](https://www.npmjs.com/search?q=tsparticles-preset) |
| `themes` | `array` | | It's an array of Theme object, you can see the structure {@link ITheme | here } |

## Plugins

Expand Down
6 changes: 6 additions & 0 deletions core/main/markdown/Options/ManualParticles.md
View file
@@ -0,0 +1,6 @@
# Manual Particles

| key | option type | example | notes |
| ----------- | ----------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `options` | `object` | | See Particles options {@link IParticles | here} |
| `position` | `object` | `{ "x": 50, "y": 50 }` | The position specified is not absolute, it will be used as a percent value of the canvas size. If it's not specified a random position will be used. |
10 changes: 6 additions & 4 deletions core/main/src/Core/Particles.ts
View file
Expand Up @@ -71,10 +71,12 @@ export class Particles {
let handled = false;

for (const particle of options.manualParticles) {
const pos = {
x: (particle.position.x * container.canvas.size.width) / 100,
y: (particle.position.y * container.canvas.size.height) / 100,
};
const pos = particle.position
? {
x: (particle.position.x * container.canvas.size.width) / 100,
y: (particle.position.y * container.canvas.size.height) / 100,
}
: undefined;

this.addParticle(pos, particle.options);
}
Expand Down
12 changes: 5 additions & 7 deletions core/main/src/Options/Classes/ManualParticle.ts
View file
Expand Up @@ -7,20 +7,18 @@ import { Utils } from "../../Utils";

export class ManualParticle implements IManualParticle, IOptionLoader<IManualParticle> {
public options?: RecursivePartial<IParticles>;
public position: ICoordinates;

constructor() {
this.position = { x: 50, y: 50 };
}
public position?: ICoordinates;

public load(data?: RecursivePartial<IManualParticle>): void {
if (!data) {
return;
}

if (data.position !== undefined) {
this.position.x = data.position.x ?? this.position.x;
this.position.y = data.position.y ?? this.position.y;
this.position = {
x: data.position.x ?? 50,
y: data.position.y ?? 50,
};
}

if (data.options !== undefined) {
Expand Down
14 changes: 13 additions & 1 deletion core/main/src/Options/Interfaces/IManualParticle.ts
View file
Expand Up @@ -2,7 +2,19 @@ import type { ICoordinates } from "../../Core/Interfaces/ICoordinates";
import type { IParticles } from "./Particles/IParticles";
import type { RecursivePartial } from "../../Types";

/**
* Manual particles options
* [[include:Options/ManualParticles.md]]
* @category options
*/
export interface IManualParticle {
position: ICoordinates;
/**
* Particle position in canvas size percent, if undefined a random position will be used
*/
position?: ICoordinates;

/**
* Particle options, this properties will override the general particles configuration
*/
options?: RecursivePartial<IParticles>;
}

0 comments on commit 0f67407

Please sign in to comment.