@tsparticles/plugin-polygon-mask 3.0.0-alpha.1 → 3.0.0-beta.1

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 (52) hide show
  1. package/README.md +15 -11
  2. package/browser/Options/Classes/PolygonMask.js +6 -12
  3. package/browser/Options/Classes/PolygonMaskDraw.js +2 -19
  4. package/browser/Options/Classes/PolygonMaskDrawStroke.js +3 -4
  5. package/browser/PolygonMaskInstance.js +298 -306
  6. package/browser/index.js +13 -14
  7. package/browser/package.json +1 -0
  8. package/browser/pathseg.js +1 -1
  9. package/browser/utils.js +3 -5
  10. package/cjs/Options/Classes/PolygonMask.js +9 -15
  11. package/cjs/Options/Classes/PolygonMaskDraw.js +3 -20
  12. package/cjs/Options/Classes/PolygonMaskDrawStroke.js +2 -3
  13. package/cjs/PolygonMaskInstance.js +311 -334
  14. package/cjs/index.js +15 -27
  15. package/cjs/package.json +1 -0
  16. package/cjs/pathseg.js +1 -1
  17. package/cjs/utils.js +4 -6
  18. package/esm/Options/Classes/PolygonMask.js +6 -12
  19. package/esm/Options/Classes/PolygonMaskDraw.js +2 -19
  20. package/esm/Options/Classes/PolygonMaskDrawStroke.js +3 -4
  21. package/esm/PolygonMaskInstance.js +298 -306
  22. package/esm/index.js +13 -14
  23. package/esm/package.json +1 -0
  24. package/esm/pathseg.js +1 -1
  25. package/esm/utils.js +3 -5
  26. package/package.json +21 -6
  27. package/report.html +4 -4
  28. package/tsparticles.plugin.polygon-mask.js +336 -362
  29. package/tsparticles.plugin.polygon-mask.min.js +1 -1
  30. package/tsparticles.plugin.polygon-mask.min.js.LICENSE.txt +1 -8
  31. package/types/Interfaces/ISvgPath.d.ts +1 -1
  32. package/types/Options/Classes/PolygonMask.d.ts +7 -10
  33. package/types/Options/Classes/PolygonMaskDraw.d.ts +3 -8
  34. package/types/Options/Classes/PolygonMaskDrawStroke.d.ts +2 -3
  35. package/types/Options/Classes/PolygonMaskInline.d.ts +3 -3
  36. package/types/Options/Classes/PolygonMaskLocalSvg.d.ts +1 -1
  37. package/types/Options/Classes/PolygonMaskMove.d.ts +2 -2
  38. package/types/Options/Interfaces/IPolygonMask.d.ts +5 -5
  39. package/types/Options/Interfaces/IPolygonMaskDraw.d.ts +1 -4
  40. package/types/Options/Interfaces/IPolygonMaskInline.d.ts +1 -1
  41. package/types/Options/Interfaces/IPolygonMaskMove.d.ts +1 -1
  42. package/types/PolygonMaskInstance.d.ts +15 -17
  43. package/types/index.d.ts +5 -5
  44. package/types/types.d.ts +3 -3
  45. package/types/utils.d.ts +3 -4
  46. package/umd/Options/Classes/PolygonMask.js +10 -16
  47. package/umd/Options/Classes/PolygonMaskDraw.js +4 -21
  48. package/umd/Options/Classes/PolygonMaskDrawStroke.js +2 -3
  49. package/umd/PolygonMaskInstance.js +300 -308
  50. package/umd/index.js +16 -17
  51. package/umd/pathseg.js +1 -1
  52. package/umd/utils.js +3 -5
package/cjs/index.js CHANGED
@@ -13,50 +13,38 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
13
13
  var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
14
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
15
  };
16
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
17
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
18
- return new (P || (P = Promise))(function (resolve, reject) {
19
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
20
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
21
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
22
- step((generator = generator.apply(thisArg, _arguments || [])).next());
23
- });
24
- };
25
16
  Object.defineProperty(exports, "__esModule", { value: true });
26
17
  exports.loadPolygonMaskPlugin = void 0;
27
- require("./pathseg");
28
- const PolygonMask_1 = require("./Options/Classes/PolygonMask");
29
- const PolygonMaskInstance_1 = require("./PolygonMaskInstance");
18
+ require("./pathseg.js");
19
+ const PolygonMask_js_1 = require("./Options/Classes/PolygonMask.js");
20
+ const PolygonMaskInstance_js_1 = require("./PolygonMaskInstance.js");
30
21
  class PolygonMaskPlugin {
31
22
  constructor(engine) {
32
23
  this.id = "polygonMask";
33
24
  this._engine = engine;
34
25
  }
35
26
  getPlugin(container) {
36
- return new PolygonMaskInstance_1.PolygonMaskInstance(container, this._engine);
27
+ return new PolygonMaskInstance_js_1.PolygonMaskInstance(container, this._engine);
37
28
  }
38
29
  loadOptions(options, source) {
39
- if (!this.needsPlugin(source)) {
30
+ if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
40
31
  return;
41
32
  }
42
33
  let polygonOptions = options.polygon;
43
- if ((polygonOptions === null || polygonOptions === void 0 ? void 0 : polygonOptions.load) === undefined) {
44
- options.polygon = polygonOptions = new PolygonMask_1.PolygonMask();
34
+ if (polygonOptions?.load === undefined) {
35
+ options.polygon = polygonOptions = new PolygonMask_js_1.PolygonMask();
45
36
  }
46
- polygonOptions.load(source === null || source === void 0 ? void 0 : source.polygon);
37
+ polygonOptions.load(source?.polygon);
47
38
  }
48
39
  needsPlugin(options) {
49
- var _a, _b, _c;
50
- return ((_b = (_a = options === null || options === void 0 ? void 0 : options.polygon) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : (((_c = options === null || options === void 0 ? void 0 : options.polygon) === null || _c === void 0 ? void 0 : _c.type) !== undefined && options.polygon.type !== "none"));
40
+ return (options?.polygon?.enable ??
41
+ (options?.polygon?.type !== undefined && options.polygon.type !== "none"));
51
42
  }
52
43
  }
53
- function loadPolygonMaskPlugin(engine) {
54
- return __awaiter(this, void 0, void 0, function* () {
55
- const plugin = new PolygonMaskPlugin(engine);
56
- yield engine.addPlugin(plugin);
57
- });
44
+ async function loadPolygonMaskPlugin(engine, refresh = true) {
45
+ await engine.addPlugin(new PolygonMaskPlugin(engine), refresh);
58
46
  }
59
47
  exports.loadPolygonMaskPlugin = loadPolygonMaskPlugin;
60
- __exportStar(require("./Enums/PolygonMaskInlineArrangement"), exports);
61
- __exportStar(require("./Enums/PolygonMaskMoveType"), exports);
62
- __exportStar(require("./Enums/PolygonMaskType"), exports);
48
+ __exportStar(require("./Enums/PolygonMaskInlineArrangement.js"), exports);
49
+ __exportStar(require("./Enums/PolygonMaskMoveType.js"), exports);
50
+ __exportStar(require("./Enums/PolygonMaskType.js"), exports);
@@ -0,0 +1 @@
1
+ { "type": "commonjs" }
package/cjs/pathseg.js CHANGED
@@ -1064,7 +1064,7 @@
1064
1064
  this._pathElement.setAttribute("d", window.SVGPathSegList._pathSegArrayAsString(this._list));
1065
1065
  this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);
1066
1066
  };
1067
- window.SVGPathSegList.prototype.segmentChanged = function (pathSeg) {
1067
+ window.SVGPathSegList.prototype.segmentChanged = function () {
1068
1068
  this._writeListToPath();
1069
1069
  };
1070
1070
  window.SVGPathSegList.prototype.clear = function () {
package/cjs/utils.js CHANGED
@@ -31,17 +31,15 @@ function drawPolygonMaskPath(context, path, stroke, position) {
31
31
  }
32
32
  exports.drawPolygonMaskPath = drawPolygonMaskPath;
33
33
  function parsePaths(paths, scale, offset) {
34
- var _a;
35
34
  const res = [];
36
35
  for (const path of paths) {
37
- const segments = path.element.pathSegList, len = (_a = segments === null || segments === void 0 ? void 0 : segments.numberOfItems) !== null && _a !== void 0 ? _a : 0, p = {
36
+ const segments = path.element.pathSegList, len = segments?.numberOfItems ?? 0, p = {
38
37
  x: 0,
39
38
  y: 0,
40
39
  };
41
40
  for (let i = 0; i < len; i++) {
42
- const segment = segments === null || segments === void 0 ? void 0 : segments.getItem(i);
43
- const svgPathSeg = window.SVGPathSeg;
44
- switch (segment === null || segment === void 0 ? void 0 : segment.pathSegType) {
41
+ const segment = segments?.getItem(i), svgPathSeg = window.SVGPathSeg;
42
+ switch (segment?.pathSegType) {
45
43
  case svgPathSeg.PATHSEG_MOVETO_ABS:
46
44
  case svgPathSeg.PATHSEG_LINETO_ABS:
47
45
  case svgPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
@@ -92,7 +90,7 @@ function parsePaths(paths, scale, offset) {
92
90
  }
93
91
  exports.parsePaths = parsePaths;
94
92
  function calcClosestPtOnSegment(s1, s2, pos) {
95
- const { dx: dx1, dy: dy1 } = (0, engine_1.getDistances)(pos, s1), { dx: dx2, dy: dy2 } = (0, engine_1.getDistances)(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (Math.pow(dx2, 2) + Math.pow(dy2, 2)), res = {
93
+ const { dx: dx1, dy: dy1 } = (0, engine_1.getDistances)(pos, s1), { dx: dx2, dy: dy2 } = (0, engine_1.getDistances)(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (dx2 ** 2 + dy2 ** 2), res = {
96
94
  x: s1.x + dx2 * t,
97
95
  y: s1.y + dy2 * t,
98
96
  isOnSegment: t >= 0 && t <= 1,
@@ -1,8 +1,8 @@
1
- import { PolygonMaskDraw } from "./PolygonMaskDraw";
2
- import { PolygonMaskInline } from "./PolygonMaskInline";
3
- import { PolygonMaskLocalSvg } from "./PolygonMaskLocalSvg";
4
- import { PolygonMaskMove } from "./PolygonMaskMove";
5
- import { deepExtend } from "@tsparticles/engine";
1
+ import { deepExtend, isString, } from "@tsparticles/engine";
2
+ import { PolygonMaskDraw } from "./PolygonMaskDraw.js";
3
+ import { PolygonMaskInline } from "./PolygonMaskInline.js";
4
+ import { PolygonMaskLocalSvg } from "./PolygonMaskLocalSvg.js";
5
+ import { PolygonMaskMove } from "./PolygonMaskMove.js";
6
6
  export class PolygonMask {
7
7
  constructor() {
8
8
  this.draw = new PolygonMaskDraw();
@@ -12,12 +12,6 @@ export class PolygonMask {
12
12
  this.scale = 1;
13
13
  this.type = "none";
14
14
  }
15
- get inlineArrangement() {
16
- return this.inline.arrangement;
17
- }
18
- set inlineArrangement(value) {
19
- this.inline.arrangement = value;
20
- }
21
15
  load(data) {
22
16
  if (!data) {
23
17
  return;
@@ -41,7 +35,7 @@ export class PolygonMask {
41
35
  this.url = data.url;
42
36
  }
43
37
  if (data.data !== undefined) {
44
- if (typeof data.data === "string") {
38
+ if (isString(data.data)) {
45
39
  this.data = data.data;
46
40
  }
47
41
  else {
@@ -1,34 +1,17 @@
1
- import { OptionsColor } from "@tsparticles/engine";
2
- import { PolygonMaskDrawStroke } from "./PolygonMaskDrawStroke";
1
+ import { PolygonMaskDrawStroke } from "./PolygonMaskDrawStroke.js";
3
2
  export class PolygonMaskDraw {
4
3
  constructor() {
5
4
  this.enable = false;
6
5
  this.stroke = new PolygonMaskDrawStroke();
7
6
  }
8
- get lineColor() {
9
- return this.stroke.color;
10
- }
11
- set lineColor(value) {
12
- this.stroke.color = OptionsColor.create(this.stroke.color, value);
13
- }
14
- get lineWidth() {
15
- return this.stroke.width;
16
- }
17
- set lineWidth(value) {
18
- this.stroke.width = value;
19
- }
20
7
  load(data) {
21
- var _a;
22
8
  if (!data) {
23
9
  return;
24
10
  }
25
11
  if (data.enable !== undefined) {
26
12
  this.enable = data.enable;
27
13
  }
28
- const stroke = (_a = data.stroke) !== null && _a !== void 0 ? _a : {
29
- color: data.lineColor,
30
- width: data.lineWidth,
31
- };
14
+ const stroke = data.stroke;
32
15
  this.stroke.load(stroke);
33
16
  }
34
17
  }
@@ -1,4 +1,4 @@
1
- import { OptionsColor, stringToAlpha } from "@tsparticles/engine";
1
+ import { OptionsColor, isString, stringToAlpha } from "@tsparticles/engine";
2
2
  export class PolygonMaskDrawStroke {
3
3
  constructor() {
4
4
  this.color = new OptionsColor();
@@ -6,13 +6,12 @@ export class PolygonMaskDrawStroke {
6
6
  this.opacity = 1;
7
7
  }
8
8
  load(data) {
9
- var _a;
10
9
  if (!data) {
11
10
  return;
12
11
  }
13
12
  this.color = OptionsColor.create(this.color, data.color);
14
- if (typeof this.color.value === "string") {
15
- this.opacity = (_a = stringToAlpha(this.color.value)) !== null && _a !== void 0 ? _a : this.opacity;
13
+ if (isString(this.color.value)) {
14
+ this.opacity = stringToAlpha(this.color.value) ?? this.opacity;
16
15
  }
17
16
  if (data.opacity !== undefined) {
18
17
  this.opacity = data.opacity;