@tsparticles/shape-path 3.9.1 → 4.0.0-alpha.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 (25) hide show
  1. package/237.min.js +2 -0
  2. package/237.min.js.LICENSE.txt +1 -0
  3. package/browser/PathDrawer.js +1 -1
  4. package/browser/Utils.js +44 -8
  5. package/browser/index.js +6 -4
  6. package/cjs/IPathData.js +1 -2
  7. package/cjs/PathDrawer.js +6 -10
  8. package/cjs/PathParticle.js +1 -2
  9. package/cjs/SegmentType.js +2 -5
  10. package/cjs/Utils.js +56 -23
  11. package/cjs/index.js +6 -7
  12. package/dist_browser_PathDrawer_js.js +50 -0
  13. package/esm/PathDrawer.js +1 -1
  14. package/esm/Utils.js +44 -8
  15. package/esm/index.js +6 -4
  16. package/package.json +4 -3
  17. package/report.html +5 -4
  18. package/tsparticles.shape.path.js +209 -50
  19. package/tsparticles.shape.path.min.js +1 -1
  20. package/tsparticles.shape.path.min.js.LICENSE.txt +1 -1
  21. package/types/PathDrawer.d.ts +1 -1
  22. package/types/index.d.ts +1 -1
  23. package/umd/PathDrawer.js +1 -1
  24. package/umd/Utils.js +44 -8
  25. package/umd/index.js +41 -5
package/237.min.js ADDED
@@ -0,0 +1,2 @@
1
+ /*! For license information please see 237.min.js.LICENSE.txt */
2
+ (this.webpackChunk_tsparticles_shape_path=this.webpackChunk_tsparticles_shape_path||[]).push([[237],{237(e,a,s){s.d(a,{PathDrawer:()=>i});var t,r=s(303);!function(e){e.line="line",e.bezier="bezier",e.quadratic="quadratic",e.arc="arc",e.ellipse="ellipse"}(t||(t={}));class i{constructor(){this.validTypes=["path"]}draw(e){const{context:a,particle:s,radius:r}=e;s.pathData&&function(e,a,s){const r=s.segments[0];if(!r)return;const i=r.values[0];if(!i)return;e.moveTo(i.x*a,i.y*a);for(const r of s.segments){const s=r.values[0],i=1,c=2,n=3;if(!s)continue;const l=r.values[i],u=r.values[c],o=r.values[n];switch(r.type){case t.line:e.lineTo(s.x*a,s.y*a);break;case t.bezier:if(!l||!u||!o)break;e.bezierCurveTo(l.x*a,l.y*a,u.x*a,u.y*a,o.x*a,o.y*a);break;case t.quadratic:if(!l||!u)break;e.quadraticCurveTo(l.x*a,l.y*a,u.x*a,u.y*a);break;case t.arc:if(!l||!u)break;e.arc(s.x*a,s.y*a,l.x*a,u.x,u.y);break;case t.ellipse:if(!l||!u||!o)break;e.ellipse(s.x*a,s.y*a,l.x*a,l.y*a,u.x,o.x,o.y)}}if(!s.half)return;for(let r=s.segments.length-1;r>=0;r--){const i=s.segments[r];if(!i)continue;const c=i.values[0],n=1,l=2,u=i.values[n],o=i.values[l];switch(i.type){case t.line:if(!c)break;e.lineTo(c.x*-a,c.y*a);break;case t.bezier:if(!c||!u||!o)break;e.bezierCurveTo(-o.x*a,o.y*a,-u.x*a,u.y*a,c.x*a,c.y*a);break;case t.quadratic:if(!u||!o)break;e.quadraticCurveTo(-u.x*a,u.y*a,-o.x*a,o.y*a);case t.arc:case t.ellipse:}}}(a,r,s.pathData)}particleInit(e,a){const s=a.shapeData;s&&(a.pathData=(0,r.deepExtend)({},s))}}}}]);
package/237.min.js.LICENSE.txt ADDED
@@ -0,0 +1 @@
1
+ /*! tsParticles Path Shape v4.0.0-alpha.0 by Matteo Bruni */
package/browser/PathDrawer.js CHANGED
@@ -11,7 +11,7 @@ export class PathDrawer {
11
11
  }
12
12
  drawPath(context, radius, particle.pathData);
13
13
  }
14
- particleInit(container, particle) {
14
+ particleInit(_container, particle) {
15
15
  const shape = particle.shapeData;
16
16
  if (!shape) {
17
17
  return;
package/browser/Utils.js CHANGED
@@ -1,24 +1,47 @@
1
1
  import { SegmentType } from "./SegmentType.js";
2
2
  export function drawPath(ctx, radius, path) {
3
- const firstIndex = 0, firstSegment = path.segments[firstIndex], firstValue = firstSegment.values[firstIndex];
3
+ const firstIndex = 0, firstSegment = path.segments[firstIndex];
4
+ if (!firstSegment) {
5
+ return;
6
+ }
7
+ const firstValue = firstSegment.values[firstIndex];
8
+ if (!firstValue) {
9
+ return;
10
+ }
4
11
  ctx.moveTo(firstValue.x * radius, firstValue.y * radius);
5
12
  for (const segment of path.segments) {
6
13
  const value = segment.values[firstIndex], index2 = 1, index3 = 2, index4 = 3;
14
+ if (!value) {
15
+ continue;
16
+ }
17
+ const segmentValue2 = segment.values[index2], segmentValue3 = segment.values[index3], segmentValue4 = segment.values[index4];
7
18
  switch (segment.type) {
8
19
  case SegmentType.line:
9
20
  ctx.lineTo(value.x * radius, value.y * radius);
10
21
  break;
11
22
  case SegmentType.bezier:
12
- ctx.bezierCurveTo(segment.values[index2].x * radius, segment.values[index2].y * radius, segment.values[index3].x * radius, segment.values[index3].y * radius, segment.values[index4].x * radius, segment.values[index4].y * radius);
23
+ if (!segmentValue2 || !segmentValue3 || !segmentValue4) {
24
+ break;
25
+ }
26
+ ctx.bezierCurveTo(segmentValue2.x * radius, segmentValue2.y * radius, segmentValue3.x * radius, segmentValue3.y * radius, segmentValue4.x * radius, segmentValue4.y * radius);
13
27
  break;
14
28
  case SegmentType.quadratic:
15
- ctx.quadraticCurveTo(segment.values[index2].x * radius, segment.values[index2].y * radius, segment.values[index3].x * radius, segment.values[index3].y * radius);
29
+ if (!segmentValue2 || !segmentValue3) {
30
+ break;
31
+ }
32
+ ctx.quadraticCurveTo(segmentValue2.x * radius, segmentValue2.y * radius, segmentValue3.x * radius, segmentValue3.y * radius);
16
33
  break;
17
34
  case SegmentType.arc:
18
- ctx.arc(value.x * radius, value.y * radius, segment.values[index2].x * radius, segment.values[index3].x, segment.values[index3].y);
35
+ if (!segmentValue2 || !segmentValue3) {
36
+ break;
37
+ }
38
+ ctx.arc(value.x * radius, value.y * radius, segmentValue2.x * radius, segmentValue3.x, segmentValue3.y);
19
39
  break;
20
40
  case SegmentType.ellipse:
21
- ctx.ellipse(value.x * radius, value.y * radius, segment.values[index2].x * radius, segment.values[index2].y * radius, segment.values[index3].x, segment.values[index4].x, segment.values[index4].y);
41
+ if (!segmentValue2 || !segmentValue3 || !segmentValue4) {
42
+ break;
43
+ }
44
+ ctx.ellipse(value.x * radius, value.y * radius, segmentValue2.x * radius, segmentValue2.y * radius, segmentValue3.x, segmentValue4.x, segmentValue4.y);
22
45
  }
23
46
  }
24
47
  if (!path.half) {
@@ -26,16 +49,29 @@ export function drawPath(ctx, radius, path) {
26
49
  }
27
50
  const lengthOffset = 1, minLength = 0;
28
51
  for (let i = path.segments.length - lengthOffset; i >= minLength; i--) {
29
- const segment = path.segments[i], value = segment.values[firstIndex], index2 = 1, index3 = 2;
52
+ const segment = path.segments[i];
53
+ if (!segment) {
54
+ continue;
55
+ }
56
+ const value = segment.values[firstIndex], index2 = 1, index3 = 2, segmentValue2 = segment.values[index2], segmentValue3 = segment.values[index3];
30
57
  switch (segment.type) {
31
58
  case SegmentType.line:
59
+ if (!value) {
60
+ break;
61
+ }
32
62
  ctx.lineTo(value.x * -radius, value.y * radius);
33
63
  break;
34
64
  case SegmentType.bezier:
35
- ctx.bezierCurveTo(-segment.values[index3].x * radius, segment.values[index3].y * radius, -segment.values[index2].x * radius, segment.values[index2].y * radius, value.x * radius, value.y * radius);
65
+ if (!value || !segmentValue2 || !segmentValue3) {
66
+ break;
67
+ }
68
+ ctx.bezierCurveTo(-segmentValue3.x * radius, segmentValue3.y * radius, -segmentValue2.x * radius, segmentValue2.y * radius, value.x * radius, value.y * radius);
36
69
  break;
37
70
  case SegmentType.quadratic:
38
- ctx.quadraticCurveTo(-segment.values[index2].x * radius, segment.values[index2].y * radius, -segment.values[index3].x * radius, segment.values[index3].y * radius);
71
+ if (!segmentValue2 || !segmentValue3) {
72
+ break;
73
+ }
74
+ ctx.quadraticCurveTo(-segmentValue2.x * radius, segmentValue2.y * radius, -segmentValue3.x * radius, segmentValue3.y * radius);
39
75
  break;
40
76
  case SegmentType.arc:
41
77
  case SegmentType.ellipse:
package/browser/index.js CHANGED
@@ -1,5 +1,7 @@
1
- import { PathDrawer } from "./PathDrawer.js";
2
- export async function loadPathShape(engine, refresh = true) {
3
- engine.checkVersion("3.9.1");
4
- await engine.addShape(new PathDrawer(), refresh);
1
+ export function loadPathShape(engine) {
2
+ engine.checkVersion("4.0.0-alpha.0");
3
+ engine.register(async (e) => {
4
+ const { PathDrawer } = await import("./PathDrawer.js");
5
+ e.addShape(new PathDrawer());
6
+ });
5
7
  }
package/cjs/IPathData.js CHANGED
@@ -1,2 +1 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
1
+ export {};
package/cjs/PathDrawer.js CHANGED
@@ -1,9 +1,6 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PathDrawer = void 0;
4
- const engine_1 = require("@tsparticles/engine");
5
- const Utils_js_1 = require("./Utils.js");
6
- class PathDrawer {
1
+ import { deepExtend } from "@tsparticles/engine";
2
+ import { drawPath } from "./Utils.js";
3
+ export class PathDrawer {
7
4
  constructor() {
8
5
  this.validTypes = ["path"];
9
6
  }
@@ -12,14 +9,13 @@ class PathDrawer {
12
9
  if (!particle.pathData) {
13
10
  return;
14
11
  }
15
- (0, Utils_js_1.drawPath)(context, radius, particle.pathData);
12
+ drawPath(context, radius, particle.pathData);
16
13
  }
17
- particleInit(container, particle) {
14
+ particleInit(_container, particle) {
18
15
  const shape = particle.shapeData;
19
16
  if (!shape) {
20
17
  return;
21
18
  }
22
- particle.pathData = (0, engine_1.deepExtend)({}, shape);
19
+ particle.pathData = deepExtend({}, shape);
23
20
  }
24
21
  }
25
- exports.PathDrawer = PathDrawer;
package/cjs/PathParticle.js CHANGED
@@ -1,2 +1 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
1
+ export {};
package/cjs/SegmentType.js CHANGED
@@ -1,11 +1,8 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.SegmentType = void 0;
4
- var SegmentType;
1
+ export var SegmentType;
5
2
  (function (SegmentType) {
6
3
  SegmentType["line"] = "line";
7
4
  SegmentType["bezier"] = "bezier";
8
5
  SegmentType["quadratic"] = "quadratic";
9
6
  SegmentType["arc"] = "arc";
10
7
  SegmentType["ellipse"] = "ellipse";
11
- })(SegmentType || (exports.SegmentType = SegmentType = {}));
8
+ })(SegmentType || (SegmentType = {}));
package/cjs/Utils.js CHANGED
@@ -1,27 +1,47 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.drawPath = drawPath;
4
- const SegmentType_js_1 = require("./SegmentType.js");
5
- function drawPath(ctx, radius, path) {
6
- const firstIndex = 0, firstSegment = path.segments[firstIndex], firstValue = firstSegment.values[firstIndex];
1
+ import { SegmentType } from "./SegmentType.js";
2
+ export function drawPath(ctx, radius, path) {
3
+ const firstIndex = 0, firstSegment = path.segments[firstIndex];
4
+ if (!firstSegment) {
5
+ return;
6
+ }
7
+ const firstValue = firstSegment.values[firstIndex];
8
+ if (!firstValue) {
9
+ return;
10
+ }
7
11
  ctx.moveTo(firstValue.x * radius, firstValue.y * radius);
8
12
  for (const segment of path.segments) {
9
13
  const value = segment.values[firstIndex], index2 = 1, index3 = 2, index4 = 3;
14
+ if (!value) {
15
+ continue;
16
+ }
17
+ const segmentValue2 = segment.values[index2], segmentValue3 = segment.values[index3], segmentValue4 = segment.values[index4];
10
18
  switch (segment.type) {
11
- case SegmentType_js_1.SegmentType.line:
19
+ case SegmentType.line:
12
20
  ctx.lineTo(value.x * radius, value.y * radius);
13
21
  break;
14
- case SegmentType_js_1.SegmentType.bezier:
15
- ctx.bezierCurveTo(segment.values[index2].x * radius, segment.values[index2].y * radius, segment.values[index3].x * radius, segment.values[index3].y * radius, segment.values[index4].x * radius, segment.values[index4].y * radius);
22
+ case SegmentType.bezier:
23
+ if (!segmentValue2 || !segmentValue3 || !segmentValue4) {
24
+ break;
25
+ }
26
+ ctx.bezierCurveTo(segmentValue2.x * radius, segmentValue2.y * radius, segmentValue3.x * radius, segmentValue3.y * radius, segmentValue4.x * radius, segmentValue4.y * radius);
16
27
  break;
17
- case SegmentType_js_1.SegmentType.quadratic:
18
- ctx.quadraticCurveTo(segment.values[index2].x * radius, segment.values[index2].y * radius, segment.values[index3].x * radius, segment.values[index3].y * radius);
28
+ case SegmentType.quadratic:
29
+ if (!segmentValue2 || !segmentValue3) {
30
+ break;
31
+ }
32
+ ctx.quadraticCurveTo(segmentValue2.x * radius, segmentValue2.y * radius, segmentValue3.x * radius, segmentValue3.y * radius);
19
33
  break;
20
- case SegmentType_js_1.SegmentType.arc:
21
- ctx.arc(value.x * radius, value.y * radius, segment.values[index2].x * radius, segment.values[index3].x, segment.values[index3].y);
34
+ case SegmentType.arc:
35
+ if (!segmentValue2 || !segmentValue3) {
36
+ break;
37
+ }
38
+ ctx.arc(value.x * radius, value.y * radius, segmentValue2.x * radius, segmentValue3.x, segmentValue3.y);
22
39
  break;
23
- case SegmentType_js_1.SegmentType.ellipse:
24
- ctx.ellipse(value.x * radius, value.y * radius, segment.values[index2].x * radius, segment.values[index2].y * radius, segment.values[index3].x, segment.values[index4].x, segment.values[index4].y);
40
+ case SegmentType.ellipse:
41
+ if (!segmentValue2 || !segmentValue3 || !segmentValue4) {
42
+ break;
43
+ }
44
+ ctx.ellipse(value.x * radius, value.y * radius, segmentValue2.x * radius, segmentValue2.y * radius, segmentValue3.x, segmentValue4.x, segmentValue4.y);
25
45
  }
26
46
  }
27
47
  if (!path.half) {
@@ -29,19 +49,32 @@ function drawPath(ctx, radius, path) {
29
49
  }
30
50
  const lengthOffset = 1, minLength = 0;
31
51
  for (let i = path.segments.length - lengthOffset; i >= minLength; i--) {
32
- const segment = path.segments[i], value = segment.values[firstIndex], index2 = 1, index3 = 2;
52
+ const segment = path.segments[i];
53
+ if (!segment) {
54
+ continue;
55
+ }
56
+ const value = segment.values[firstIndex], index2 = 1, index3 = 2, segmentValue2 = segment.values[index2], segmentValue3 = segment.values[index3];
33
57
  switch (segment.type) {
34
- case SegmentType_js_1.SegmentType.line:
58
+ case SegmentType.line:
59
+ if (!value) {
60
+ break;
61
+ }
35
62
  ctx.lineTo(value.x * -radius, value.y * radius);
36
63
  break;
37
- case SegmentType_js_1.SegmentType.bezier:
38
- ctx.bezierCurveTo(-segment.values[index3].x * radius, segment.values[index3].y * radius, -segment.values[index2].x * radius, segment.values[index2].y * radius, value.x * radius, value.y * radius);
64
+ case SegmentType.bezier:
65
+ if (!value || !segmentValue2 || !segmentValue3) {
66
+ break;
67
+ }
68
+ ctx.bezierCurveTo(-segmentValue3.x * radius, segmentValue3.y * radius, -segmentValue2.x * radius, segmentValue2.y * radius, value.x * radius, value.y * radius);
39
69
  break;
40
- case SegmentType_js_1.SegmentType.quadratic:
41
- ctx.quadraticCurveTo(-segment.values[index2].x * radius, segment.values[index2].y * radius, -segment.values[index3].x * radius, segment.values[index3].y * radius);
70
+ case SegmentType.quadratic:
71
+ if (!segmentValue2 || !segmentValue3) {
72
+ break;
73
+ }
74
+ ctx.quadraticCurveTo(-segmentValue2.x * radius, segmentValue2.y * radius, -segmentValue3.x * radius, segmentValue3.y * radius);
42
75
  break;
43
- case SegmentType_js_1.SegmentType.arc:
44
- case SegmentType_js_1.SegmentType.ellipse:
76
+ case SegmentType.arc:
77
+ case SegmentType.ellipse:
45
78
  default:
46
79
  break;
47
80
  }
package/cjs/index.js CHANGED
@@ -1,8 +1,7 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.loadPathShape = loadPathShape;
4
- const PathDrawer_js_1 = require("./PathDrawer.js");
5
- async function loadPathShape(engine, refresh = true) {
6
- engine.checkVersion("3.9.1");
7
- await engine.addShape(new PathDrawer_js_1.PathDrawer(), refresh);
1
+ export function loadPathShape(engine) {
2
+ engine.checkVersion("4.0.0-alpha.0");
3
+ engine.register(async (e) => {
4
+ const { PathDrawer } = await import("./PathDrawer.js");
5
+ e.addShape(new PathDrawer());
6
+ });
8
7
  }
package/dist_browser_PathDrawer_js.js ADDED
@@ -0,0 +1,50 @@
1
+ /*!
2
+ * Author : Matteo Bruni
3
+ * MIT license: https://opensource.org/licenses/MIT
4
+ * Demo / Generator : https://particles.js.org/
5
+ * GitHub : https://www.github.com/matteobruni/tsparticles
6
+ * How to use? : Check the GitHub README
7
+ * v4.0.0-alpha.0
8
+ */
9
+ "use strict";
10
+ /*
11
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
12
+ * This devtool is neither made for production nor for readable output files.
13
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
14
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
15
+ * or disable the default devtool with "devtool: false".
16
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
17
+ */
18
+ (this["webpackChunk_tsparticles_shape_path"] = this["webpackChunk_tsparticles_shape_path"] || []).push([["dist_browser_PathDrawer_js"],{
19
+
20
+ /***/ "./dist/browser/PathDrawer.js"
21
+ /*!************************************!*\
22
+ !*** ./dist/browser/PathDrawer.js ***!
23
+ \************************************/
24
+ (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
25
+
26
+ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ PathDrawer: () => (/* binding */ PathDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\nclass PathDrawer {\n constructor() {\n this.validTypes = [\"path\"];\n }\n draw(data) {\n const {\n context,\n particle,\n radius\n } = data;\n if (!particle.pathData) {\n return;\n }\n (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawPath)(context, radius, particle.pathData);\n }\n particleInit(_container, particle) {\n const shape = particle.shapeData;\n if (!shape) {\n return;\n }\n particle.pathData = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, shape);\n }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-path/./dist/browser/PathDrawer.js?\n}");
27
+
28
+ /***/ },
29
+
30
+ /***/ "./dist/browser/SegmentType.js"
31
+ /*!*************************************!*\
32
+ !*** ./dist/browser/SegmentType.js ***!
33
+ \*************************************/
34
+ (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
35
+
36
+ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ SegmentType: () => (/* binding */ SegmentType)\n/* harmony export */ });\nvar SegmentType;\n(function (SegmentType) {\n SegmentType[\"line\"] = \"line\";\n SegmentType[\"bezier\"] = \"bezier\";\n SegmentType[\"quadratic\"] = \"quadratic\";\n SegmentType[\"arc\"] = \"arc\";\n SegmentType[\"ellipse\"] = \"ellipse\";\n})(SegmentType || (SegmentType = {}));\n\n//# sourceURL=webpack://@tsparticles/shape-path/./dist/browser/SegmentType.js?\n}");
37
+
38
+ /***/ },
39
+
40
+ /***/ "./dist/browser/Utils.js"
41
+ /*!*******************************!*\
42
+ !*** ./dist/browser/Utils.js ***!
43
+ \*******************************/
44
+ (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
45
+
46
+ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ drawPath: () => (/* binding */ drawPath)\n/* harmony export */ });\n/* harmony import */ var _SegmentType_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./SegmentType.js */ \"./dist/browser/SegmentType.js\");\n\nfunction drawPath(ctx, radius, path) {\n const firstIndex = 0,\n firstSegment = path.segments[firstIndex];\n if (!firstSegment) {\n return;\n }\n const firstValue = firstSegment.values[firstIndex];\n if (!firstValue) {\n return;\n }\n ctx.moveTo(firstValue.x * radius, firstValue.y * radius);\n for (const segment of path.segments) {\n const value = segment.values[firstIndex],\n index2 = 1,\n index3 = 2,\n index4 = 3;\n if (!value) {\n continue;\n }\n const segmentValue2 = segment.values[index2],\n segmentValue3 = segment.values[index3],\n segmentValue4 = segment.values[index4];\n switch (segment.type) {\n case _SegmentType_js__WEBPACK_IMPORTED_MODULE_0__.SegmentType.line:\n ctx.lineTo(value.x * radius, value.y * radius);\n break;\n case _SegmentType_js__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier:\n if (!segmentValue2 || !segmentValue3 || !segmentValue4) {\n break;\n }\n ctx.bezierCurveTo(segmentValue2.x * radius, segmentValue2.y * radius, segmentValue3.x * radius, segmentValue3.y * radius, segmentValue4.x * radius, segmentValue4.y * radius);\n break;\n case _SegmentType_js__WEBPACK_IMPORTED_MODULE_0__.SegmentType.quadratic:\n if (!segmentValue2 || !segmentValue3) {\n break;\n }\n ctx.quadraticCurveTo(segmentValue2.x * radius, segmentValue2.y * radius, segmentValue3.x * radius, segmentValue3.y * radius);\n break;\n case _SegmentType_js__WEBPACK_IMPORTED_MODULE_0__.SegmentType.arc:\n if (!segmentValue2 || !segmentValue3) {\n break;\n }\n ctx.arc(value.x * radius, value.y * radius, segmentValue2.x * radius, segmentValue3.x, segmentValue3.y);\n break;\n case _SegmentType_js__WEBPACK_IMPORTED_MODULE_0__.SegmentType.ellipse:\n if (!segmentValue2 || !segmentValue3 || !segmentValue4) {\n break;\n }\n ctx.ellipse(value.x * radius, value.y * radius, segmentValue2.x * radius, segmentValue2.y * radius, segmentValue3.x, segmentValue4.x, segmentValue4.y);\n }\n }\n if (!path.half) {\n return;\n }\n const lengthOffset = 1,\n minLength = 0;\n for (let i = path.segments.length - lengthOffset; i >= minLength; i--) {\n const segment = path.segments[i];\n if (!segment) {\n continue;\n }\n const value = segment.values[firstIndex],\n index2 = 1,\n index3 = 2,\n segmentValue2 = segment.values[index2],\n segmentValue3 = segment.values[index3];\n switch (segment.type) {\n case _SegmentType_js__WEBPACK_IMPORTED_MODULE_0__.SegmentType.line:\n if (!value) {\n break;\n }\n ctx.lineTo(value.x * -radius, value.y * radius);\n break;\n case _SegmentType_js__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier:\n if (!value || !segmentValue2 || !segmentValue3) {\n break;\n }\n ctx.bezierCurveTo(-segmentValue3.x * radius, segmentValue3.y * radius, -segmentValue2.x * radius, segmentValue2.y * radius, value.x * radius, value.y * radius);\n break;\n case _SegmentType_js__WEBPACK_IMPORTED_MODULE_0__.SegmentType.quadratic:\n if (!segmentValue2 || !segmentValue3) {\n break;\n }\n ctx.quadraticCurveTo(-segmentValue2.x * radius, segmentValue2.y * radius, -segmentValue3.x * radius, segmentValue3.y * radius);\n break;\n case _SegmentType_js__WEBPACK_IMPORTED_MODULE_0__.SegmentType.arc:\n case _SegmentType_js__WEBPACK_IMPORTED_MODULE_0__.SegmentType.ellipse:\n default:\n break;\n }\n }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-path/./dist/browser/Utils.js?\n}");
47
+
48
+ /***/ }
49
+
50
+ }]);
package/esm/PathDrawer.js CHANGED
@@ -11,7 +11,7 @@ export class PathDrawer {
11
11
  }
12
12
  drawPath(context, radius, particle.pathData);
13
13
  }
14
- particleInit(container, particle) {
14
+ particleInit(_container, particle) {
15
15
  const shape = particle.shapeData;
16
16
  if (!shape) {
17
17
  return;
package/esm/Utils.js CHANGED
@@ -1,24 +1,47 @@
1
1
  import { SegmentType } from "./SegmentType.js";
2
2
  export function drawPath(ctx, radius, path) {
3
- const firstIndex = 0, firstSegment = path.segments[firstIndex], firstValue = firstSegment.values[firstIndex];
3
+ const firstIndex = 0, firstSegment = path.segments[firstIndex];
4
+ if (!firstSegment) {
5
+ return;
6
+ }
7
+ const firstValue = firstSegment.values[firstIndex];
8
+ if (!firstValue) {
9
+ return;
10
+ }
4
11
  ctx.moveTo(firstValue.x * radius, firstValue.y * radius);
5
12
  for (const segment of path.segments) {
6
13
  const value = segment.values[firstIndex], index2 = 1, index3 = 2, index4 = 3;
14
+ if (!value) {
15
+ continue;
16
+ }
17
+ const segmentValue2 = segment.values[index2], segmentValue3 = segment.values[index3], segmentValue4 = segment.values[index4];
7
18
  switch (segment.type) {
8
19
  case SegmentType.line:
9
20
  ctx.lineTo(value.x * radius, value.y * radius);
10
21
  break;
11
22
  case SegmentType.bezier:
12
- ctx.bezierCurveTo(segment.values[index2].x * radius, segment.values[index2].y * radius, segment.values[index3].x * radius, segment.values[index3].y * radius, segment.values[index4].x * radius, segment.values[index4].y * radius);
23
+ if (!segmentValue2 || !segmentValue3 || !segmentValue4) {
24
+ break;
25
+ }
26
+ ctx.bezierCurveTo(segmentValue2.x * radius, segmentValue2.y * radius, segmentValue3.x * radius, segmentValue3.y * radius, segmentValue4.x * radius, segmentValue4.y * radius);
13
27
  break;
14
28
  case SegmentType.quadratic:
15
- ctx.quadraticCurveTo(segment.values[index2].x * radius, segment.values[index2].y * radius, segment.values[index3].x * radius, segment.values[index3].y * radius);
29
+ if (!segmentValue2 || !segmentValue3) {
30
+ break;
31
+ }
32
+ ctx.quadraticCurveTo(segmentValue2.x * radius, segmentValue2.y * radius, segmentValue3.x * radius, segmentValue3.y * radius);
16
33
  break;
17
34
  case SegmentType.arc:
18
- ctx.arc(value.x * radius, value.y * radius, segment.values[index2].x * radius, segment.values[index3].x, segment.values[index3].y);
35
+ if (!segmentValue2 || !segmentValue3) {
36
+ break;
37
+ }
38
+ ctx.arc(value.x * radius, value.y * radius, segmentValue2.x * radius, segmentValue3.x, segmentValue3.y);
19
39
  break;
20
40
  case SegmentType.ellipse:
21
- ctx.ellipse(value.x * radius, value.y * radius, segment.values[index2].x * radius, segment.values[index2].y * radius, segment.values[index3].x, segment.values[index4].x, segment.values[index4].y);
41
+ if (!segmentValue2 || !segmentValue3 || !segmentValue4) {
42
+ break;
43
+ }
44
+ ctx.ellipse(value.x * radius, value.y * radius, segmentValue2.x * radius, segmentValue2.y * radius, segmentValue3.x, segmentValue4.x, segmentValue4.y);
22
45
  }
23
46
  }
24
47
  if (!path.half) {
@@ -26,16 +49,29 @@ export function drawPath(ctx, radius, path) {
26
49
  }
27
50
  const lengthOffset = 1, minLength = 0;
28
51
  for (let i = path.segments.length - lengthOffset; i >= minLength; i--) {
29
- const segment = path.segments[i], value = segment.values[firstIndex], index2 = 1, index3 = 2;
52
+ const segment = path.segments[i];
53
+ if (!segment) {
54
+ continue;
55
+ }
56
+ const value = segment.values[firstIndex], index2 = 1, index3 = 2, segmentValue2 = segment.values[index2], segmentValue3 = segment.values[index3];
30
57
  switch (segment.type) {
31
58
  case SegmentType.line:
59
+ if (!value) {
60
+ break;
61
+ }
32
62
  ctx.lineTo(value.x * -radius, value.y * radius);
33
63
  break;
34
64
  case SegmentType.bezier:
35
- ctx.bezierCurveTo(-segment.values[index3].x * radius, segment.values[index3].y * radius, -segment.values[index2].x * radius, segment.values[index2].y * radius, value.x * radius, value.y * radius);
65
+ if (!value || !segmentValue2 || !segmentValue3) {
66
+ break;
67
+ }
68
+ ctx.bezierCurveTo(-segmentValue3.x * radius, segmentValue3.y * radius, -segmentValue2.x * radius, segmentValue2.y * radius, value.x * radius, value.y * radius);
36
69
  break;
37
70
  case SegmentType.quadratic:
38
- ctx.quadraticCurveTo(-segment.values[index2].x * radius, segment.values[index2].y * radius, -segment.values[index3].x * radius, segment.values[index3].y * radius);
71
+ if (!segmentValue2 || !segmentValue3) {
72
+ break;
73
+ }
74
+ ctx.quadraticCurveTo(-segmentValue2.x * radius, segmentValue2.y * radius, -segmentValue3.x * radius, segmentValue3.y * radius);
39
75
  break;
40
76
  case SegmentType.arc:
41
77
  case SegmentType.ellipse:
package/esm/index.js CHANGED
@@ -1,5 +1,7 @@
1
- import { PathDrawer } from "./PathDrawer.js";
2
- export async function loadPathShape(engine, refresh = true) {
3
- engine.checkVersion("3.9.1");
4
- await engine.addShape(new PathDrawer(), refresh);
1
+ export function loadPathShape(engine) {
2
+ engine.checkVersion("4.0.0-alpha.0");
3
+ engine.register(async (e) => {
4
+ const { PathDrawer } = await import("./PathDrawer.js");
5
+ e.addShape(new PathDrawer());
6
+ });
5
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/shape-path",
3
- "version": "3.9.1",
3
+ "version": "4.0.0-alpha.0",
4
4
  "description": "tsParticles path shape",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
@@ -100,9 +100,10 @@
100
100
  "./package.json": "./package.json"
101
101
  },
102
102
  "dependencies": {
103
- "@tsparticles/engine": "3.9.1"
103
+ "@tsparticles/engine": "4.0.0-alpha.0"
104
104
  },
105
105
  "publishConfig": {
106
106
  "access": "public"
107
- }
107
+ },
108
+ "type": "module"
108
109
  }