@tsparticles/plugin-polygon-mask 3.0.0-alpha.0 → 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.
- package/README.md +15 -11
- package/browser/Options/Classes/PolygonMask.js +2 -8
- package/browser/Options/Classes/PolygonMaskDraw.js +1 -18
- package/browser/Options/Classes/PolygonMaskDrawStroke.js +3 -4
- package/browser/PolygonMaskInstance.js +297 -305
- package/browser/index.js +7 -8
- package/browser/pathseg.js +1 -1
- package/browser/utils.js +3 -5
- package/cjs/Options/Classes/PolygonMask.js +2 -8
- package/cjs/Options/Classes/PolygonMaskDraw.js +1 -18
- package/cjs/Options/Classes/PolygonMaskDrawStroke.js +2 -3
- package/cjs/PolygonMaskInstance.js +309 -332
- package/cjs/index.js +7 -19
- package/cjs/pathseg.js +1 -1
- package/cjs/utils.js +4 -6
- package/esm/Options/Classes/PolygonMask.js +2 -8
- package/esm/Options/Classes/PolygonMaskDraw.js +1 -18
- package/esm/Options/Classes/PolygonMaskDrawStroke.js +3 -4
- package/esm/PolygonMaskInstance.js +297 -305
- package/esm/index.js +7 -8
- package/esm/pathseg.js +1 -1
- package/esm/utils.js +3 -5
- package/package.json +8 -5
- 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/Options/Classes/PolygonMask.d.ts +1 -4
- package/types/Options/Classes/PolygonMaskDraw.d.ts +1 -6
- package/types/Options/Classes/PolygonMaskDrawStroke.d.ts +1 -2
- package/types/Options/Interfaces/IPolygonMaskDraw.d.ts +0 -3
- package/types/PolygonMaskInstance.d.ts +13 -15
- package/types/index.d.ts +1 -1
- package/types/utils.d.ts +1 -2
- package/umd/Options/Classes/PolygonMask.js +3 -9
- package/umd/Options/Classes/PolygonMaskDraw.js +2 -19
- package/umd/Options/Classes/PolygonMaskDrawStroke.js +2 -3
- package/umd/PolygonMaskInstance.js +298 -306
- package/umd/index.js +7 -8
- package/umd/pathseg.js +1 -1
- package/umd/utils.js +3 -5
package/browser/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/browser/utils.js
CHANGED
|
@@ -26,17 +26,15 @@ export function drawPolygonMaskPath(context, path, stroke, position) {
|
|
|
26
26
|
context.setTransform(1, 0, 0, 1, 0, 0);
|
|
27
27
|
}
|
|
28
28
|
export function parsePaths(paths, scale, offset) {
|
|
29
|
-
var _a;
|
|
30
29
|
const res = [];
|
|
31
30
|
for (const path of paths) {
|
|
32
|
-
const segments = path.element.pathSegList, len =
|
|
31
|
+
const segments = path.element.pathSegList, len = segments?.numberOfItems ?? 0, p = {
|
|
33
32
|
x: 0,
|
|
34
33
|
y: 0,
|
|
35
34
|
};
|
|
36
35
|
for (let i = 0; i < len; i++) {
|
|
37
|
-
const segment = segments
|
|
38
|
-
|
|
39
|
-
switch (segment === null || segment === void 0 ? void 0 : segment.pathSegType) {
|
|
36
|
+
const segment = segments?.getItem(i), svgPathSeg = window.SVGPathSeg;
|
|
37
|
+
switch (segment?.pathSegType) {
|
|
40
38
|
case svgPathSeg.PATHSEG_MOVETO_ABS:
|
|
41
39
|
case svgPathSeg.PATHSEG_LINETO_ABS:
|
|
42
40
|
case svgPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PolygonMask = void 0;
|
|
4
|
+
const engine_1 = require("@tsparticles/engine");
|
|
4
5
|
const PolygonMaskDraw_1 = require("./PolygonMaskDraw");
|
|
5
6
|
const PolygonMaskInline_1 = require("./PolygonMaskInline");
|
|
6
7
|
const PolygonMaskLocalSvg_1 = require("./PolygonMaskLocalSvg");
|
|
7
8
|
const PolygonMaskMove_1 = require("./PolygonMaskMove");
|
|
8
|
-
const engine_1 = require("@tsparticles/engine");
|
|
9
9
|
class PolygonMask {
|
|
10
10
|
constructor() {
|
|
11
11
|
this.draw = new PolygonMaskDraw_1.PolygonMaskDraw();
|
|
@@ -15,12 +15,6 @@ class PolygonMask {
|
|
|
15
15
|
this.scale = 1;
|
|
16
16
|
this.type = "none";
|
|
17
17
|
}
|
|
18
|
-
get inlineArrangement() {
|
|
19
|
-
return this.inline.arrangement;
|
|
20
|
-
}
|
|
21
|
-
set inlineArrangement(value) {
|
|
22
|
-
this.inline.arrangement = value;
|
|
23
|
-
}
|
|
24
18
|
load(data) {
|
|
25
19
|
if (!data) {
|
|
26
20
|
return;
|
|
@@ -44,7 +38,7 @@ class PolygonMask {
|
|
|
44
38
|
this.url = data.url;
|
|
45
39
|
}
|
|
46
40
|
if (data.data !== undefined) {
|
|
47
|
-
if (
|
|
41
|
+
if ((0, engine_1.isString)(data.data)) {
|
|
48
42
|
this.data = data.data;
|
|
49
43
|
}
|
|
50
44
|
else {
|
|
@@ -1,37 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PolygonMaskDraw = void 0;
|
|
4
|
-
const engine_1 = require("@tsparticles/engine");
|
|
5
4
|
const PolygonMaskDrawStroke_1 = require("./PolygonMaskDrawStroke");
|
|
6
5
|
class PolygonMaskDraw {
|
|
7
6
|
constructor() {
|
|
8
7
|
this.enable = false;
|
|
9
8
|
this.stroke = new PolygonMaskDrawStroke_1.PolygonMaskDrawStroke();
|
|
10
9
|
}
|
|
11
|
-
get lineColor() {
|
|
12
|
-
return this.stroke.color;
|
|
13
|
-
}
|
|
14
|
-
set lineColor(value) {
|
|
15
|
-
this.stroke.color = engine_1.OptionsColor.create(this.stroke.color, value);
|
|
16
|
-
}
|
|
17
|
-
get lineWidth() {
|
|
18
|
-
return this.stroke.width;
|
|
19
|
-
}
|
|
20
|
-
set lineWidth(value) {
|
|
21
|
-
this.stroke.width = value;
|
|
22
|
-
}
|
|
23
10
|
load(data) {
|
|
24
|
-
var _a;
|
|
25
11
|
if (!data) {
|
|
26
12
|
return;
|
|
27
13
|
}
|
|
28
14
|
if (data.enable !== undefined) {
|
|
29
15
|
this.enable = data.enable;
|
|
30
16
|
}
|
|
31
|
-
const stroke =
|
|
32
|
-
color: data.lineColor,
|
|
33
|
-
width: data.lineWidth,
|
|
34
|
-
};
|
|
17
|
+
const stroke = data.stroke;
|
|
35
18
|
this.stroke.load(stroke);
|
|
36
19
|
}
|
|
37
20
|
}
|
|
@@ -9,13 +9,12 @@ class PolygonMaskDrawStroke {
|
|
|
9
9
|
this.opacity = 1;
|
|
10
10
|
}
|
|
11
11
|
load(data) {
|
|
12
|
-
var _a;
|
|
13
12
|
if (!data) {
|
|
14
13
|
return;
|
|
15
14
|
}
|
|
16
15
|
this.color = engine_1.OptionsColor.create(this.color, data.color);
|
|
17
|
-
if (
|
|
18
|
-
this.opacity = (
|
|
16
|
+
if ((0, engine_1.isString)(this.color.value)) {
|
|
17
|
+
this.opacity = (0, engine_1.stringToAlpha)(this.color.value) ?? this.opacity;
|
|
19
18
|
}
|
|
20
19
|
if (data.opacity !== undefined) {
|
|
21
20
|
this.opacity = data.opacity;
|