Skip to content

Commit

Permalink
updated for tsparticles 1.17.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@matteobruni
matteobruni committed Jul 16, 2020
1 parent d2ce253 commit 3d5bbb7
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 35 deletions.
22 changes: 10 additions & 12 deletions index.d.ts
View file
Expand Up @@ -4,24 +4,22 @@
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

/// <reference types="react" />

import { ComponentClass } from "react";
import { IOptions } from "tsparticles/dist/Options/Interfaces/IOptions";
import { Container } from "tsparticles/dist/Core/Container";
import { RecursivePartial } from "tsparticles/dist/Types/RecursivePartial";
import { IParticlesParams } from "./src/Particles";

export * from 'tsparticles/dist/Enums';
export { IParticlesParams };

export type IParticlesParams = RecursivePartial<IOptions>;
export * from 'tsparticles/dist/Enums';

export interface ParticlesProps {
width?: string;
height?: string;
params?: IParticlesParams;
style?: any;
className?: string;
canvasClassName?: string;
particlesRef?: React.RefObject<Container>;
width?: string;
height?: string;
params?: IParticlesParams;
style?: any;
className?: string;
canvasClassName?: string;
particlesRef?: React.RefObject<Container>;
}

type Particles = ComponentClass<ParticlesProps>;
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -35,7 +35,7 @@
},
"dependencies": {
"lodash": "^4.17.11",
"tsparticles": "^1.15.0-beta.3"
"tsparticles": "^1.17.0"
},
"peerDependencies": {
"react": "^16.0.0"
Expand Down
30 changes: 15 additions & 15 deletions src/DefaultOptions.ts
View file
Expand Up @@ -17,34 +17,34 @@ export const defaultParams: RecursivePartial<IOptions & IPolygonMaskOptions & IA
max: -1,
density: {
enable: false,
value_area: 1200
area: 1200
}
},
color: {
value: "#FFF"
},
shape: {
type: ShapeType.circle,
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 5
sides: 5
},
image: {
src: "",
width: 100,
height: 100
}
},
stroke: {
width: 0,
color: "#000000"
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: true,
speed: 1,
opacity_min: 0.1,
minimumValue: 0.1,
sync: false
}
},
Expand All @@ -54,11 +54,11 @@ export const defaultParams: RecursivePartial<IOptions & IPolygonMaskOptions & IA
anim: {
enable: false,
speed: 40,
size_min: 0,
minimumValue: 0,
sync: false
}
},
line_linked: {
links: {
enable: true,
distance: 150,
color: "#FFF",
Expand All @@ -76,7 +76,7 @@ export const defaultParams: RecursivePartial<IOptions & IPolygonMaskOptions & IA
direction: MoveDirection.none,
random: false,
straight: false,
out_mode: OutMode.bounce,
outMode: OutMode.bounce,
bounce: true,
attract: {
enable: false,
Expand All @@ -101,7 +101,7 @@ export const defaultParams: RecursivePartial<IOptions & IPolygonMaskOptions & IA
modes: {
grab: {
distance: 180,
line_linked: {
links: {
opacity: 0.35
}
},
Expand All @@ -115,15 +115,15 @@ export const defaultParams: RecursivePartial<IOptions & IPolygonMaskOptions & IA
duration: 5
},
push: {
particles_nb: 4
quantity: 4
},
remove: {
particles_nb: 2
quantity: 2
}
}
},
retina_detect: true,
fps_limit: 999,
detectRetina: true,
fpsLimit: 999,
polygon: {
enable: false,
scale: 1,
Expand Down
12 changes: 9 additions & 3 deletions src/Particles.tsx
View file
Expand Up @@ -2,20 +2,22 @@ import * as React from "react";
import { Component } from "react";
import isEqual from "lodash/isEqual";
import type { IOptions } from "tsparticles/dist/Options/Interfaces/IOptions";
import { Options } from "tsparticles/dist/Options/Classes/Options";
import { Container } from "tsparticles/dist/Core/Container";
import type { RecursivePartial } from "tsparticles/dist/Types/RecursivePartial";
import { defaultParams } from "./DefaultOptions";
import { tsParticles } from "tsparticles";
import { IPolygonMaskOptions } from "tsparticles/dist/Plugins/PolygonMask/PolygonMaskPlugin";
import { IAbsorberOptions } from "tsparticles/dist/Plugins/Absorbers/AbsorbersPlugin";
import { IEmitterOptions } from "tsparticles/dist/Plugins/Emitters/EmittersPlugin";
import { Utils } from "tsparticles/dist/Utils";

export type IParticlesParams = RecursivePartial<IOptions & IPolygonMaskOptions & IAbsorberOptions & IEmitterOptions>;

export interface ParticlesProps {
id: string;
width: string;
height: string;
params: RecursivePartial<IOptions & IPolygonMaskOptions & IAbsorberOptions & IEmitterOptions>;
params: IParticlesParams;
style: any;
className?: string;
canvasClassName?: string;
Expand Down Expand Up @@ -55,7 +57,11 @@ export default class Particles extends Component<ParticlesProps,

tsParticles.init();

const options = Utils.deepExtend({}, defaultParams, params);
const options = new Options();

options.load(defaultParams);
options.load(params);

const container = new Container(tagId, options);

if (this.props.particlesRef) {
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Expand Up @@ -4082,10 +4082,10 @@ tslib@^2.0.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==

tsparticles@^1.15.0-beta.3:
version "1.15.0-beta.3"
resolved "https://registry.yarnpkg.com/tsparticles/-/tsparticles-1.15.0-beta.3.tgz#6bd31553417a20528a4b684f72006161e820f2e2"
integrity sha512-+fkU/Oa6Cp3d+YIvpV2dm3SK4JI2mHYWBdddDubqtAl6uQh7v3G3CEVcy8vzgZ1OCg6dj13hp5d4e9PXcA6ZVA==
tsparticles@^1.17.0:
version "1.17.0"
resolved "https://registry.yarnpkg.com/tsparticles/-/tsparticles-1.17.0.tgz#2f1e3026d81e08aab7d772baddb9320c1095e288"
integrity sha512-WtU5XQr18+uSTUPJC9yiWCOFtK7v86jOpY+DdMNZoEUN3zCsa1pKYTR3DQFeCPjlJWhDIkbOYRxxuGuVE7sP5A==
dependencies:
pathseg "^1.2.0"
tslib "^2.0.0"
Expand Down

0 comments on commit 3d5bbb7

Please sign in to comment.