@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.
- package/README.md +15 -11
- package/browser/Options/Classes/PolygonMask.js +6 -12
- package/browser/Options/Classes/PolygonMaskDraw.js +2 -19
- package/browser/Options/Classes/PolygonMaskDrawStroke.js +3 -4
- package/browser/PolygonMaskInstance.js +298 -306
- package/browser/index.js +13 -14
- package/browser/package.json +1 -0
- package/browser/pathseg.js +1 -1
- package/browser/utils.js +3 -5
- package/cjs/Options/Classes/PolygonMask.js +9 -15
- package/cjs/Options/Classes/PolygonMaskDraw.js +3 -20
- package/cjs/Options/Classes/PolygonMaskDrawStroke.js +2 -3
- package/cjs/PolygonMaskInstance.js +311 -334
- package/cjs/index.js +15 -27
- package/cjs/package.json +1 -0
- package/cjs/pathseg.js +1 -1
- package/cjs/utils.js +4 -6
- package/esm/Options/Classes/PolygonMask.js +6 -12
- package/esm/Options/Classes/PolygonMaskDraw.js +2 -19
- package/esm/Options/Classes/PolygonMaskDrawStroke.js +3 -4
- package/esm/PolygonMaskInstance.js +298 -306
- package/esm/index.js +13 -14
- package/esm/package.json +1 -0
- package/esm/pathseg.js +1 -1
- package/esm/utils.js +3 -5
- package/package.json +21 -6
- package/report.html +4 -4
- package/tsparticles.plugin.polygon-mask.js +336 -362
- package/tsparticles.plugin.polygon-mask.min.js +1 -1
- package/tsparticles.plugin.polygon-mask.min.js.LICENSE.txt +1 -8
- package/types/Interfaces/ISvgPath.d.ts +1 -1
- package/types/Options/Classes/PolygonMask.d.ts +7 -10
- package/types/Options/Classes/PolygonMaskDraw.d.ts +3 -8
- package/types/Options/Classes/PolygonMaskDrawStroke.d.ts +2 -3
- package/types/Options/Classes/PolygonMaskInline.d.ts +3 -3
- package/types/Options/Classes/PolygonMaskLocalSvg.d.ts +1 -1
- package/types/Options/Classes/PolygonMaskMove.d.ts +2 -2
- package/types/Options/Interfaces/IPolygonMask.d.ts +5 -5
- package/types/Options/Interfaces/IPolygonMaskDraw.d.ts +1 -4
- package/types/Options/Interfaces/IPolygonMaskInline.d.ts +1 -1
- package/types/Options/Interfaces/IPolygonMaskMove.d.ts +1 -1
- package/types/PolygonMaskInstance.d.ts +15 -17
- package/types/index.d.ts +5 -5
- package/types/types.d.ts +3 -3
- package/types/utils.d.ts +3 -4
- package/umd/Options/Classes/PolygonMask.js +10 -16
- package/umd/Options/Classes/PolygonMaskDraw.js +4 -21
- package/umd/Options/Classes/PolygonMaskDrawStroke.js +2 -3
- package/umd/PolygonMaskInstance.js +300 -308
- package/umd/index.js +16 -17
- package/umd/pathseg.js +1 -1
- 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
|
|
29
|
-
const
|
|
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
|
|
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 (
|
|
44
|
-
options.polygon = polygonOptions = new
|
|
34
|
+
if (polygonOptions?.load === undefined) {
|
|
35
|
+
options.polygon = polygonOptions = new PolygonMask_js_1.PolygonMask();
|
|
45
36
|
}
|
|
46
|
-
polygonOptions.load(source
|
|
37
|
+
polygonOptions.load(source?.polygon);
|
|
47
38
|
}
|
|
48
39
|
needsPlugin(options) {
|
|
49
|
-
|
|
50
|
-
|
|
40
|
+
return (options?.polygon?.enable ??
|
|
41
|
+
(options?.polygon?.type !== undefined && options.polygon.type !== "none"));
|
|
51
42
|
}
|
|
52
43
|
}
|
|
53
|
-
function loadPolygonMaskPlugin(engine) {
|
|
54
|
-
|
|
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);
|
package/cjs/package.json
ADDED
|
@@ -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 (
|
|
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 =
|
|
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
|
|
43
|
-
|
|
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) / (
|
|
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 {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
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 (
|
|
38
|
+
if (isString(data.data)) {
|
|
45
39
|
this.data = data.data;
|
|
46
40
|
}
|
|
47
41
|
else {
|
|
@@ -1,34 +1,17 @@
|
|
|
1
|
-
import {
|
|
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 =
|
|
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 (
|
|
15
|
-
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;
|