@tsparticles/shape-rounded-rect 3.0.0-alpha.1 → 3.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +16 -12
  2. package/browser/RoundedRectDrawer.js +21 -19
  3. package/browser/index.js +2 -2
  4. package/cjs/RoundedRectDrawer.js +21 -19
  5. package/cjs/index.js +2 -2
  6. package/esm/RoundedRectDrawer.js +21 -19
  7. package/esm/index.js +2 -2
  8. package/package.json +10 -5
  9. package/report.html +4 -4
  10. package/tsparticles.shape.rounded-rect.js +93 -49
  11. package/tsparticles.shape.rounded-rect.min.js +1 -1
  12. package/tsparticles.shape.rounded-rect.min.js.LICENSE.txt +1 -8
  13. package/types/IRoundedRectData.d.ts +2 -2
  14. package/types/RoundedParticle.d.ts +4 -0
  15. package/types/RoundedRectDrawer.d.ts +4 -3
  16. package/types/index.d.ts +1 -1
  17. package/umd/RoundedRectDrawer.js +22 -20
  18. package/umd/index.js +2 -2
  19. package/types/IRoundedParticle.d.ts +0 -4
  20. /package/browser/{IRoundedParticle.js → RoundedParticle.js} +0 -0
  21. /package/cjs/{IRoundedParticle.js → RoundedParticle.js} +0 -0
  22. /package/esm/{IRoundedParticle.js → RoundedParticle.js} +0 -0
  23. /package/umd/{IRoundedParticle.js → RoundedParticle.js} +0 -0
package/README.md CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  # tsParticles Rounded Rectangle Shape
4
4
 
5
- [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-shape-rounded-rect/badge)](https://www.jsdelivr.com/package/npm/tsparticles-shape-rounded-rect)
6
- [![npmjs](https://badge.fury.io/js/tsparticles-shape-rounded-rect.svg)](https://www.npmjs.com/package/tsparticles-shape-rounded-rect)
7
- [![npmjs](https://img.shields.io/npm/dt/tsparticles-shape-rounded-rect)](https://www.npmjs.com/package/tsparticles-shape-rounded-rect) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
5
+ [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/shape-rounded-rect/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/shape-rounded-rect)
6
+ [![npmjs](https://badge.fury.io/js/@tsparticles/shape-rounded-rect.svg)](https://www.npmjs.com/package/@tsparticles/shape-rounded-rect)
7
+ [![npmjs](https://img.shields.io/npm/dt/@tsparticles/shape-rounded-rect)](https://www.npmjs.com/package/@tsparticles/shape-rounded-rect) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
8
8
 
9
9
  [tsParticles](https://github.com/matteobruni/tsparticles) additional rounded rectangle shape.
10
10
 
@@ -26,7 +26,7 @@ Once the scripts are loaded you can set up `tsParticles` and the shape like this
26
26
 
27
27
  ```javascript
28
28
  (async () => {
29
- await loadRoundedRectShape();
29
+ await loadRoundedRectShape(tsParticles);
30
30
 
31
31
  await tsParticles.load({
32
32
  id: "tsparticles",
@@ -43,29 +43,33 @@ Once the scripts are loaded you can set up `tsParticles` and the shape like this
43
43
  This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
44
44
 
45
45
  ```shell
46
- $ npm install tsparticles-shape-rounded-rect
46
+ $ npm install @tsparticles/shape-rounded-rect
47
47
  ```
48
48
 
49
49
  or
50
50
 
51
51
  ```shell
52
- $ yarn add tsparticles-shape-rounded-rect
52
+ $ yarn add @tsparticles/shape-rounded-rect
53
53
  ```
54
54
 
55
55
  Then you need to import it in the app, like this:
56
56
 
57
57
  ```javascript
58
- const { tsParticles } = require("tsparticles-engine");
59
- const { loadRoundedRectShape } = require("tsparticles-shape-rounded-rect");
58
+ const { tsParticles } = require("@tsparticles/engine");
59
+ const { loadRoundedRectShape } = require("@tsparticles/shape-rounded-rect");
60
60
 
61
- loadRoundedRectShape(tsParticles);
61
+ (async () => {
62
+ await loadRoundedRectShape(tsParticles);
63
+ })();
62
64
  ```
63
65
 
64
66
  or
65
67
 
66
68
  ```javascript
67
- import { tsParticles } from "tsparticles-engine";
68
- import { loadRoundedRectShape } from "tsparticles-shape-rounded-rect";
69
+ import { tsParticles } from "@tsparticles/engine";
70
+ import { loadRoundedRectShape } from "@tsparticles/shape-rounded-rect";
69
71
 
70
- loadRoundedRectShape(tsParticles);
72
+ (async () => {
73
+ await loadRoundedRectShape(tsParticles);
74
+ })();
71
75
  ```
package/browser/RoundedRectDrawer.js CHANGED
@@ -1,12 +1,11 @@
1
- const drawRoundedRect = (ctx, info, radius = {
1
+ import { getRangeValue } from "@tsparticles/engine";
2
+ const fixFactor = Math.sqrt(2), drawRoundedRect = (ctx, info, radius = {
2
3
  topRight: 4,
3
4
  bottomRight: 4,
4
5
  bottomLeft: 4,
5
6
  topLeft: 4,
6
7
  }) => {
7
- const { x, y, width, height } = info;
8
- const r = x + width;
9
- const b = y + height;
8
+ const { x, y, width, height } = info, r = x + width, b = y + height;
10
9
  ctx.moveTo(x + radius.topLeft, y);
11
10
  ctx.lineTo(r - radius.topRight, y);
12
11
  ctx.quadraticCurveTo(r, y, r, y + radius.topRight);
@@ -19,23 +18,26 @@ const drawRoundedRect = (ctx, info, radius = {
19
18
  };
20
19
  export class RoundedRectDrawer {
21
20
  draw(context, particle, radius) {
22
- const roundedRect = particle;
23
- drawRoundedRect(context, {
24
- x: 0,
25
- y: 0,
26
- height: radius,
27
- width: radius,
28
- }, {
29
- topLeft: roundedRect.borderRadius,
30
- topRight: roundedRect.borderRadius,
31
- bottomLeft: roundedRect.borderRadius,
32
- bottomRight: roundedRect.borderRadius,
33
- });
21
+ const fixedRadius = radius / fixFactor, fixedDiameter = fixedRadius * 2, borderRadius = particle.borderRadius ?? 5;
22
+ if ("roundRect" in context) {
23
+ context.roundRect(-fixedRadius, -fixedRadius, fixedDiameter, fixedDiameter, borderRadius);
24
+ }
25
+ else {
26
+ drawRoundedRect(context, {
27
+ x: -fixedRadius,
28
+ y: -fixedRadius,
29
+ height: fixedDiameter,
30
+ width: fixedDiameter,
31
+ }, {
32
+ topLeft: borderRadius,
33
+ topRight: borderRadius,
34
+ bottomLeft: borderRadius,
35
+ bottomRight: borderRadius,
36
+ });
37
+ }
34
38
  }
35
39
  particleInit(container, particle) {
36
- var _a;
37
40
  const shapeData = particle.shapeData;
38
- const roundedRect = particle;
39
- roundedRect.borderRadius = ((_a = shapeData === null || shapeData === void 0 ? void 0 : shapeData.radius) !== null && _a !== void 0 ? _a : 4) * container.retina.pixelRatio;
41
+ particle.borderRadius = getRangeValue(shapeData?.radius ?? 5) * container.retina.pixelRatio;
40
42
  }
41
43
  }
package/browser/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import { RoundedRectDrawer } from "./RoundedRectDrawer";
2
- export function loadRoundedRectShape(engine) {
3
- engine.addShape("rounded-rect", new RoundedRectDrawer());
2
+ export async function loadRoundedRectShape(engine, refresh = true) {
3
+ await engine.addShape("rounded-rect", new RoundedRectDrawer(), refresh);
4
4
  }
package/cjs/RoundedRectDrawer.js CHANGED
@@ -1,15 +1,14 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.RoundedRectDrawer = void 0;
4
- const drawRoundedRect = (ctx, info, radius = {
4
+ const engine_1 = require("@tsparticles/engine");
5
+ const fixFactor = Math.sqrt(2), drawRoundedRect = (ctx, info, radius = {
5
6
  topRight: 4,
6
7
  bottomRight: 4,
7
8
  bottomLeft: 4,
8
9
  topLeft: 4,
9
10
  }) => {
10
- const { x, y, width, height } = info;
11
- const r = x + width;
12
- const b = y + height;
11
+ const { x, y, width, height } = info, r = x + width, b = y + height;
13
12
  ctx.moveTo(x + radius.topLeft, y);
14
13
  ctx.lineTo(r - radius.topRight, y);
15
14
  ctx.quadraticCurveTo(r, y, r, y + radius.topRight);
@@ -22,24 +21,27 @@ const drawRoundedRect = (ctx, info, radius = {
22
21
  };
23
22
  class RoundedRectDrawer {
24
23
  draw(context, particle, radius) {
25
- const roundedRect = particle;
26
- drawRoundedRect(context, {
27
- x: 0,
28
- y: 0,
29
- height: radius,
30
- width: radius,
31
- }, {
32
- topLeft: roundedRect.borderRadius,
33
- topRight: roundedRect.borderRadius,
34
- bottomLeft: roundedRect.borderRadius,
35
- bottomRight: roundedRect.borderRadius,
36
- });
24
+ const fixedRadius = radius / fixFactor, fixedDiameter = fixedRadius * 2, borderRadius = particle.borderRadius ?? 5;
25
+ if ("roundRect" in context) {
26
+ context.roundRect(-fixedRadius, -fixedRadius, fixedDiameter, fixedDiameter, borderRadius);
27
+ }
28
+ else {
29
+ drawRoundedRect(context, {
30
+ x: -fixedRadius,
31
+ y: -fixedRadius,
32
+ height: fixedDiameter,
33
+ width: fixedDiameter,
34
+ }, {
35
+ topLeft: borderRadius,
36
+ topRight: borderRadius,
37
+ bottomLeft: borderRadius,
38
+ bottomRight: borderRadius,
39
+ });
40
+ }
37
41
  }
38
42
  particleInit(container, particle) {
39
- var _a;
40
43
  const shapeData = particle.shapeData;
41
- const roundedRect = particle;
42
- roundedRect.borderRadius = ((_a = shapeData === null || shapeData === void 0 ? void 0 : shapeData.radius) !== null && _a !== void 0 ? _a : 4) * container.retina.pixelRatio;
44
+ particle.borderRadius = (0, engine_1.getRangeValue)(shapeData?.radius ?? 5) * container.retina.pixelRatio;
43
45
  }
44
46
  }
45
47
  exports.RoundedRectDrawer = RoundedRectDrawer;
package/cjs/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.loadRoundedRectShape = void 0;
4
4
  const RoundedRectDrawer_1 = require("./RoundedRectDrawer");
5
- function loadRoundedRectShape(engine) {
6
- engine.addShape("rounded-rect", new RoundedRectDrawer_1.RoundedRectDrawer());
5
+ async function loadRoundedRectShape(engine, refresh = true) {
6
+ await engine.addShape("rounded-rect", new RoundedRectDrawer_1.RoundedRectDrawer(), refresh);
7
7
  }
8
8
  exports.loadRoundedRectShape = loadRoundedRectShape;
package/esm/RoundedRectDrawer.js CHANGED
@@ -1,12 +1,11 @@
1
- const drawRoundedRect = (ctx, info, radius = {
1
+ import { getRangeValue } from "@tsparticles/engine";
2
+ const fixFactor = Math.sqrt(2), drawRoundedRect = (ctx, info, radius = {
2
3
  topRight: 4,
3
4
  bottomRight: 4,
4
5
  bottomLeft: 4,
5
6
  topLeft: 4,
6
7
  }) => {
7
- const { x, y, width, height } = info;
8
- const r = x + width;
9
- const b = y + height;
8
+ const { x, y, width, height } = info, r = x + width, b = y + height;
10
9
  ctx.moveTo(x + radius.topLeft, y);
11
10
  ctx.lineTo(r - radius.topRight, y);
12
11
  ctx.quadraticCurveTo(r, y, r, y + radius.topRight);
@@ -19,23 +18,26 @@ const drawRoundedRect = (ctx, info, radius = {
19
18
  };
20
19
  export class RoundedRectDrawer {
21
20
  draw(context, particle, radius) {
22
- const roundedRect = particle;
23
- drawRoundedRect(context, {
24
- x: 0,
25
- y: 0,
26
- height: radius,
27
- width: radius,
28
- }, {
29
- topLeft: roundedRect.borderRadius,
30
- topRight: roundedRect.borderRadius,
31
- bottomLeft: roundedRect.borderRadius,
32
- bottomRight: roundedRect.borderRadius,
33
- });
21
+ const fixedRadius = radius / fixFactor, fixedDiameter = fixedRadius * 2, borderRadius = particle.borderRadius ?? 5;
22
+ if ("roundRect" in context) {
23
+ context.roundRect(-fixedRadius, -fixedRadius, fixedDiameter, fixedDiameter, borderRadius);
24
+ }
25
+ else {
26
+ drawRoundedRect(context, {
27
+ x: -fixedRadius,
28
+ y: -fixedRadius,
29
+ height: fixedDiameter,
30
+ width: fixedDiameter,
31
+ }, {
32
+ topLeft: borderRadius,
33
+ topRight: borderRadius,
34
+ bottomLeft: borderRadius,
35
+ bottomRight: borderRadius,
36
+ });
37
+ }
34
38
  }
35
39
  particleInit(container, particle) {
36
- var _a;
37
40
  const shapeData = particle.shapeData;
38
- const roundedRect = particle;
39
- roundedRect.borderRadius = ((_a = shapeData === null || shapeData === void 0 ? void 0 : shapeData.radius) !== null && _a !== void 0 ? _a : 4) * container.retina.pixelRatio;
41
+ particle.borderRadius = getRangeValue(shapeData?.radius ?? 5) * container.retina.pixelRatio;
40
42
  }
41
43
  }
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import { RoundedRectDrawer } from "./RoundedRectDrawer";
2
- export function loadRoundedRectShape(engine) {
3
- engine.addShape("rounded-rect", new RoundedRectDrawer());
2
+ export async function loadRoundedRectShape(engine, refresh = true) {
3
+ await engine.addShape("rounded-rect", new RoundedRectDrawer(), refresh);
4
4
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/shape-rounded-rect",
3
- "version": "3.0.0-alpha.1",
3
+ "version": "3.0.0-beta.0",
4
4
  "description": "tsParticles rounded rect shape",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
@@ -72,6 +72,10 @@
72
72
  "type": "github",
73
73
  "url": "https://github.com/sponsors/matteobruni"
74
74
  },
75
+ {
76
+ "type": "github",
77
+ "url": "https://github.com/sponsors/tsparticles"
78
+ },
75
79
  {
76
80
  "type": "buymeacoffee",
77
81
  "url": "https://www.buymeacoffee.com/matteobruni"
@@ -82,10 +86,11 @@
82
86
  "unpkg": "tsparticles.shape.rounded-rect.min.js",
83
87
  "module": "esm/index.js",
84
88
  "types": "types/index.d.ts",
89
+ "sideEffects": false,
90
+ "dependencies": {
91
+ "@tsparticles/engine": "^3.0.0-beta.0"
92
+ },
85
93
  "publishConfig": {
86
94
  "access": "public"
87
- },
88
- "dependencies": {
89
- "@tsparticles/engine": "^3.0.0-alpha.1"
90
95
  }
91
- }
96
+ }