@tsparticles/plugin-polygon-mask 3.6.0-beta.1 → 3.7.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/browser/Options/Classes/PolygonMask.js +4 -4
- package/browser/Options/Classes/PolygonMaskDraw.js +4 -3
- package/browser/Options/Classes/PolygonMaskDrawStroke.js +5 -4
- package/browser/Options/Classes/PolygonMaskInline.js +2 -1
- package/browser/Options/Classes/PolygonMaskLocalSvg.js +2 -1
- package/browser/Options/Classes/PolygonMaskMove.js +2 -1
- package/browser/PolygonMaskInstance.js +2 -2
- package/browser/PolygonMaskPlugin.js +1 -1
- package/browser/index.js +2 -0
- package/browser/utils.js +5 -5
- package/cjs/Options/Classes/PolygonMask.js +3 -3
- package/cjs/Options/Classes/PolygonMaskDraw.js +4 -3
- package/cjs/Options/Classes/PolygonMaskDrawStroke.js +4 -3
- package/cjs/Options/Classes/PolygonMaskInline.js +2 -1
- package/cjs/Options/Classes/PolygonMaskLocalSvg.js +2 -1
- package/cjs/Options/Classes/PolygonMaskMove.js +2 -1
- package/cjs/PolygonMaskInstance.js +2 -2
- package/cjs/PolygonMaskPlugin.js +1 -1
- package/cjs/index.js +2 -0
- package/cjs/utils.js +4 -4
- package/esm/Options/Classes/PolygonMask.js +4 -4
- package/esm/Options/Classes/PolygonMaskDraw.js +4 -3
- package/esm/Options/Classes/PolygonMaskDrawStroke.js +5 -4
- package/esm/Options/Classes/PolygonMaskInline.js +2 -1
- package/esm/Options/Classes/PolygonMaskLocalSvg.js +2 -1
- package/esm/Options/Classes/PolygonMaskMove.js +2 -1
- package/esm/PolygonMaskInstance.js +2 -2
- package/esm/PolygonMaskPlugin.js +1 -1
- package/esm/index.js +2 -0
- package/esm/utils.js +5 -5
- package/package.json +2 -2
- package/report.html +1 -1
- package/tsparticles.plugin.polygon-mask.js +11 -11
- package/tsparticles.plugin.polygon-mask.min.js +1 -1
- package/tsparticles.plugin.polygon-mask.min.js.LICENSE.txt +1 -1
- package/types/Options/Classes/PolygonMask.d.ts +2 -2
- package/types/Options/Classes/PolygonMaskDraw.d.ts +2 -2
- package/types/Options/Classes/PolygonMaskDrawStroke.d.ts +3 -2
- package/types/Options/Classes/PolygonMaskInline.d.ts +1 -1
- package/types/Options/Classes/PolygonMaskLocalSvg.d.ts +1 -1
- package/types/Options/Classes/PolygonMaskMove.d.ts +1 -1
- package/types/index.d.ts +1 -1
- package/types/utils.d.ts +3 -3
- package/umd/Options/Classes/PolygonMask.js +3 -3
- package/umd/Options/Classes/PolygonMaskDraw.js +5 -4
- package/umd/Options/Classes/PolygonMaskDrawStroke.js +4 -3
- package/umd/Options/Classes/PolygonMaskInline.js +3 -2
- package/umd/Options/Classes/PolygonMaskLocalSvg.js +3 -2
- package/umd/Options/Classes/PolygonMaskMove.js +3 -2
- package/umd/PolygonMaskInstance.js +2 -2
- package/umd/PolygonMaskPlugin.js +1 -1
- package/umd/index.js +3 -1
- package/umd/utils.js +4 -4
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { deepExtend, isString, } from "@tsparticles/engine";
|
|
1
|
+
import { deepExtend, isNull, isString, } from "@tsparticles/engine";
|
|
2
2
|
import { PolygonMaskDraw } from "./PolygonMaskDraw.js";
|
|
3
3
|
import { PolygonMaskInline } from "./PolygonMaskInline.js";
|
|
4
4
|
import { PolygonMaskLocalSvg } from "./PolygonMaskLocalSvg.js";
|
|
5
5
|
import { PolygonMaskMove } from "./PolygonMaskMove.js";
|
|
6
6
|
import { PolygonMaskType } from "../../Enums/PolygonMaskType.js";
|
|
7
7
|
export class PolygonMask {
|
|
8
|
-
constructor() {
|
|
9
|
-
this.draw = new PolygonMaskDraw();
|
|
8
|
+
constructor(engine) {
|
|
9
|
+
this.draw = new PolygonMaskDraw(engine);
|
|
10
10
|
this.enable = false;
|
|
11
11
|
this.inline = new PolygonMaskInline();
|
|
12
12
|
this.move = new PolygonMaskMove();
|
|
@@ -14,7 +14,7 @@ export class PolygonMask {
|
|
|
14
14
|
this.type = PolygonMaskType.none;
|
|
15
15
|
}
|
|
16
16
|
load(data) {
|
|
17
|
-
if (
|
|
17
|
+
if (isNull(data)) {
|
|
18
18
|
return;
|
|
19
19
|
}
|
|
20
20
|
this.draw.load(data.draw);
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
import { isNull } from "@tsparticles/engine";
|
|
1
2
|
import { PolygonMaskDrawStroke } from "./PolygonMaskDrawStroke.js";
|
|
2
3
|
export class PolygonMaskDraw {
|
|
3
|
-
constructor() {
|
|
4
|
+
constructor(engine) {
|
|
4
5
|
this.enable = false;
|
|
5
|
-
this.stroke = new PolygonMaskDrawStroke();
|
|
6
|
+
this.stroke = new PolygonMaskDrawStroke(engine);
|
|
6
7
|
}
|
|
7
8
|
load(data) {
|
|
8
|
-
if (
|
|
9
|
+
if (isNull(data)) {
|
|
9
10
|
return;
|
|
10
11
|
}
|
|
11
12
|
if (data.enable !== undefined) {
|
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
import { OptionsColor, isString, stringToAlpha } from "@tsparticles/engine";
|
|
1
|
+
import { OptionsColor, isNull, isString, stringToAlpha, } from "@tsparticles/engine";
|
|
2
2
|
export class PolygonMaskDrawStroke {
|
|
3
|
-
constructor() {
|
|
3
|
+
constructor(engine) {
|
|
4
|
+
this._engine = engine;
|
|
4
5
|
this.color = new OptionsColor();
|
|
5
6
|
this.width = 0.5;
|
|
6
7
|
this.opacity = 1;
|
|
7
8
|
}
|
|
8
9
|
load(data) {
|
|
9
|
-
if (
|
|
10
|
+
if (isNull(data)) {
|
|
10
11
|
return;
|
|
11
12
|
}
|
|
12
13
|
this.color = OptionsColor.create(this.color, data.color);
|
|
13
14
|
if (isString(this.color.value)) {
|
|
14
|
-
this.opacity = stringToAlpha(this.color.value) ?? this.opacity;
|
|
15
|
+
this.opacity = stringToAlpha(this._engine, this.color.value) ?? this.opacity;
|
|
15
16
|
}
|
|
16
17
|
if (data.opacity !== undefined) {
|
|
17
18
|
this.opacity = data.opacity;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import { isNull } from "@tsparticles/engine";
|
|
1
2
|
import { PolygonMaskInlineArrangement, } from "../../Enums/PolygonMaskInlineArrangement.js";
|
|
2
3
|
export class PolygonMaskInline {
|
|
3
4
|
constructor() {
|
|
4
5
|
this.arrangement = PolygonMaskInlineArrangement.onePerPoint;
|
|
5
6
|
}
|
|
6
7
|
load(data) {
|
|
7
|
-
if (
|
|
8
|
+
if (isNull(data)) {
|
|
8
9
|
return;
|
|
9
10
|
}
|
|
10
11
|
if (data.arrangement !== undefined) {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { isNull, } from "@tsparticles/engine";
|
|
1
2
|
export class PolygonMaskLocalSvg {
|
|
2
3
|
constructor() {
|
|
3
4
|
this.path = [];
|
|
@@ -7,7 +8,7 @@ export class PolygonMaskLocalSvg {
|
|
|
7
8
|
};
|
|
8
9
|
}
|
|
9
10
|
load(data) {
|
|
10
|
-
if (
|
|
11
|
+
if (isNull(data)) {
|
|
11
12
|
return;
|
|
12
13
|
}
|
|
13
14
|
if (data.path !== undefined) {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { isNull } from "@tsparticles/engine";
|
|
1
2
|
import { PolygonMaskMoveType } from "../../Enums/PolygonMaskMoveType.js";
|
|
2
3
|
export class PolygonMaskMove {
|
|
3
4
|
constructor() {
|
|
@@ -5,7 +6,7 @@ export class PolygonMaskMove {
|
|
|
5
6
|
this.type = PolygonMaskMoveType.path;
|
|
6
7
|
}
|
|
7
8
|
load(data) {
|
|
8
|
-
if (
|
|
9
|
+
if (isNull(data)) {
|
|
9
10
|
return;
|
|
10
11
|
}
|
|
11
12
|
if (data.radius !== undefined) {
|
|
@@ -328,10 +328,10 @@ export class PolygonMaskInstance {
|
|
|
328
328
|
continue;
|
|
329
329
|
}
|
|
330
330
|
if (path2d && this.offset) {
|
|
331
|
-
drawPolygonMaskPath(context, path2d, polygonDraw.stroke, this.offset);
|
|
331
|
+
drawPolygonMaskPath(this._engine, context, path2d, polygonDraw.stroke, this.offset);
|
|
332
332
|
}
|
|
333
333
|
else if (rawData) {
|
|
334
|
-
drawPolygonMask(context, rawData, polygonDraw.stroke);
|
|
334
|
+
drawPolygonMask(this._engine, context, rawData, polygonDraw.stroke);
|
|
335
335
|
}
|
|
336
336
|
}
|
|
337
337
|
}
|
|
@@ -15,7 +15,7 @@ export class PolygonMaskPlugin {
|
|
|
15
15
|
}
|
|
16
16
|
let polygonOptions = options.polygon;
|
|
17
17
|
if (polygonOptions?.load === undefined) {
|
|
18
|
-
options.polygon = polygonOptions = new PolygonMask();
|
|
18
|
+
options.polygon = polygonOptions = new PolygonMask(this._engine);
|
|
19
19
|
}
|
|
20
20
|
polygonOptions.load(source?.polygon);
|
|
21
21
|
}
|
package/browser/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import "./pathseg.js";
|
|
2
|
+
import { assertValidVersion } from "@tsparticles/engine";
|
|
2
3
|
import { PolygonMaskPlugin } from "./PolygonMaskPlugin.js";
|
|
3
4
|
export async function loadPolygonMaskPlugin(engine, refresh = true) {
|
|
5
|
+
assertValidVersion(engine, "3.7.0");
|
|
4
6
|
await engine.addPlugin(new PolygonMaskPlugin(engine), refresh);
|
|
5
7
|
}
|
|
6
8
|
export * from "./Enums/PolygonMaskInlineArrangement.js";
|
package/browser/utils.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Vector, getDistances, getStyleFromRgb, rangeColorToRgb } from "@tsparticles/engine";
|
|
1
|
+
import { Vector, getDistances, getStyleFromRgb, rangeColorToRgb, } from "@tsparticles/engine";
|
|
2
2
|
const squareExp = 2, inSegmentRange = {
|
|
3
3
|
min: 0,
|
|
4
4
|
max: 1,
|
|
5
5
|
}, double = 2;
|
|
6
|
-
export function drawPolygonMask(context, rawData, stroke) {
|
|
7
|
-
const color = rangeColorToRgb(stroke.color);
|
|
6
|
+
export function drawPolygonMask(engine, context, rawData, stroke) {
|
|
7
|
+
const color = rangeColorToRgb(engine, stroke.color);
|
|
8
8
|
if (!color) {
|
|
9
9
|
return;
|
|
10
10
|
}
|
|
@@ -19,7 +19,7 @@ export function drawPolygonMask(context, rawData, stroke) {
|
|
|
19
19
|
context.lineWidth = stroke.width;
|
|
20
20
|
context.stroke();
|
|
21
21
|
}
|
|
22
|
-
export function drawPolygonMaskPath(context, path, stroke, position) {
|
|
22
|
+
export function drawPolygonMaskPath(engine, context, path, stroke, position) {
|
|
23
23
|
const defaultTransform = {
|
|
24
24
|
a: 1,
|
|
25
25
|
b: 0,
|
|
@@ -27,7 +27,7 @@ export function drawPolygonMaskPath(context, path, stroke, position) {
|
|
|
27
27
|
d: 1,
|
|
28
28
|
};
|
|
29
29
|
context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, position.x, position.y);
|
|
30
|
-
const color = rangeColorToRgb(stroke.color);
|
|
30
|
+
const color = rangeColorToRgb(engine, stroke.color);
|
|
31
31
|
if (!color) {
|
|
32
32
|
return;
|
|
33
33
|
}
|
|
@@ -8,8 +8,8 @@ const PolygonMaskLocalSvg_js_1 = require("./PolygonMaskLocalSvg.js");
|
|
|
8
8
|
const PolygonMaskMove_js_1 = require("./PolygonMaskMove.js");
|
|
9
9
|
const PolygonMaskType_js_1 = require("../../Enums/PolygonMaskType.js");
|
|
10
10
|
class PolygonMask {
|
|
11
|
-
constructor() {
|
|
12
|
-
this.draw = new PolygonMaskDraw_js_1.PolygonMaskDraw();
|
|
11
|
+
constructor(engine) {
|
|
12
|
+
this.draw = new PolygonMaskDraw_js_1.PolygonMaskDraw(engine);
|
|
13
13
|
this.enable = false;
|
|
14
14
|
this.inline = new PolygonMaskInline_js_1.PolygonMaskInline();
|
|
15
15
|
this.move = new PolygonMaskMove_js_1.PolygonMaskMove();
|
|
@@ -17,7 +17,7 @@ class PolygonMask {
|
|
|
17
17
|
this.type = PolygonMaskType_js_1.PolygonMaskType.none;
|
|
18
18
|
}
|
|
19
19
|
load(data) {
|
|
20
|
-
if (
|
|
20
|
+
if ((0, engine_1.isNull)(data)) {
|
|
21
21
|
return;
|
|
22
22
|
}
|
|
23
23
|
this.draw.load(data.draw);
|
|
@@ -1,14 +1,15 @@
|
|
|
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");
|
|
4
5
|
const PolygonMaskDrawStroke_js_1 = require("./PolygonMaskDrawStroke.js");
|
|
5
6
|
class PolygonMaskDraw {
|
|
6
|
-
constructor() {
|
|
7
|
+
constructor(engine) {
|
|
7
8
|
this.enable = false;
|
|
8
|
-
this.stroke = new PolygonMaskDrawStroke_js_1.PolygonMaskDrawStroke();
|
|
9
|
+
this.stroke = new PolygonMaskDrawStroke_js_1.PolygonMaskDrawStroke(engine);
|
|
9
10
|
}
|
|
10
11
|
load(data) {
|
|
11
|
-
if (
|
|
12
|
+
if ((0, engine_1.isNull)(data)) {
|
|
12
13
|
return;
|
|
13
14
|
}
|
|
14
15
|
if (data.enable !== undefined) {
|
|
@@ -3,18 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.PolygonMaskDrawStroke = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
5
|
class PolygonMaskDrawStroke {
|
|
6
|
-
constructor() {
|
|
6
|
+
constructor(engine) {
|
|
7
|
+
this._engine = engine;
|
|
7
8
|
this.color = new engine_1.OptionsColor();
|
|
8
9
|
this.width = 0.5;
|
|
9
10
|
this.opacity = 1;
|
|
10
11
|
}
|
|
11
12
|
load(data) {
|
|
12
|
-
if (
|
|
13
|
+
if ((0, engine_1.isNull)(data)) {
|
|
13
14
|
return;
|
|
14
15
|
}
|
|
15
16
|
this.color = engine_1.OptionsColor.create(this.color, data.color);
|
|
16
17
|
if ((0, engine_1.isString)(this.color.value)) {
|
|
17
|
-
this.opacity = (0, engine_1.stringToAlpha)(this.color.value) ?? this.opacity;
|
|
18
|
+
this.opacity = (0, engine_1.stringToAlpha)(this._engine, this.color.value) ?? this.opacity;
|
|
18
19
|
}
|
|
19
20
|
if (data.opacity !== undefined) {
|
|
20
21
|
this.opacity = data.opacity;
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PolygonMaskInline = void 0;
|
|
4
|
+
const engine_1 = require("@tsparticles/engine");
|
|
4
5
|
const PolygonMaskInlineArrangement_js_1 = require("../../Enums/PolygonMaskInlineArrangement.js");
|
|
5
6
|
class PolygonMaskInline {
|
|
6
7
|
constructor() {
|
|
7
8
|
this.arrangement = PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.onePerPoint;
|
|
8
9
|
}
|
|
9
10
|
load(data) {
|
|
10
|
-
if (
|
|
11
|
+
if ((0, engine_1.isNull)(data)) {
|
|
11
12
|
return;
|
|
12
13
|
}
|
|
13
14
|
if (data.arrangement !== undefined) {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PolygonMaskLocalSvg = void 0;
|
|
4
|
+
const engine_1 = require("@tsparticles/engine");
|
|
4
5
|
class PolygonMaskLocalSvg {
|
|
5
6
|
constructor() {
|
|
6
7
|
this.path = [];
|
|
@@ -10,7 +11,7 @@ class PolygonMaskLocalSvg {
|
|
|
10
11
|
};
|
|
11
12
|
}
|
|
12
13
|
load(data) {
|
|
13
|
-
if (
|
|
14
|
+
if ((0, engine_1.isNull)(data)) {
|
|
14
15
|
return;
|
|
15
16
|
}
|
|
16
17
|
if (data.path !== undefined) {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PolygonMaskMove = void 0;
|
|
4
|
+
const engine_1 = require("@tsparticles/engine");
|
|
4
5
|
const PolygonMaskMoveType_js_1 = require("../../Enums/PolygonMaskMoveType.js");
|
|
5
6
|
class PolygonMaskMove {
|
|
6
7
|
constructor() {
|
|
@@ -8,7 +9,7 @@ class PolygonMaskMove {
|
|
|
8
9
|
this.type = PolygonMaskMoveType_js_1.PolygonMaskMoveType.path;
|
|
9
10
|
}
|
|
10
11
|
load(data) {
|
|
11
|
-
if (
|
|
12
|
+
if ((0, engine_1.isNull)(data)) {
|
|
12
13
|
return;
|
|
13
14
|
}
|
|
14
15
|
if (data.radius !== undefined) {
|
|
@@ -331,10 +331,10 @@ class PolygonMaskInstance {
|
|
|
331
331
|
continue;
|
|
332
332
|
}
|
|
333
333
|
if (path2d && this.offset) {
|
|
334
|
-
(0, utils_js_1.drawPolygonMaskPath)(context, path2d, polygonDraw.stroke, this.offset);
|
|
334
|
+
(0, utils_js_1.drawPolygonMaskPath)(this._engine, context, path2d, polygonDraw.stroke, this.offset);
|
|
335
335
|
}
|
|
336
336
|
else if (rawData) {
|
|
337
|
-
(0, utils_js_1.drawPolygonMask)(context, rawData, polygonDraw.stroke);
|
|
337
|
+
(0, utils_js_1.drawPolygonMask)(this._engine, context, rawData, polygonDraw.stroke);
|
|
338
338
|
}
|
|
339
339
|
}
|
|
340
340
|
}
|
package/cjs/PolygonMaskPlugin.js
CHANGED
|
@@ -18,7 +18,7 @@ class PolygonMaskPlugin {
|
|
|
18
18
|
}
|
|
19
19
|
let polygonOptions = options.polygon;
|
|
20
20
|
if (polygonOptions?.load === undefined) {
|
|
21
|
-
options.polygon = polygonOptions = new PolygonMask_js_1.PolygonMask();
|
|
21
|
+
options.polygon = polygonOptions = new PolygonMask_js_1.PolygonMask(this._engine);
|
|
22
22
|
}
|
|
23
23
|
polygonOptions.load(source?.polygon);
|
|
24
24
|
}
|
package/cjs/index.js
CHANGED
|
@@ -16,8 +16,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
exports.loadPolygonMaskPlugin = loadPolygonMaskPlugin;
|
|
18
18
|
require("./pathseg.js");
|
|
19
|
+
const engine_1 = require("@tsparticles/engine");
|
|
19
20
|
const PolygonMaskPlugin_js_1 = require("./PolygonMaskPlugin.js");
|
|
20
21
|
async function loadPolygonMaskPlugin(engine, refresh = true) {
|
|
22
|
+
(0, engine_1.assertValidVersion)(engine, "3.7.0");
|
|
21
23
|
await engine.addPlugin(new PolygonMaskPlugin_js_1.PolygonMaskPlugin(engine), refresh);
|
|
22
24
|
}
|
|
23
25
|
__exportStar(require("./Enums/PolygonMaskInlineArrangement.js"), exports);
|
package/cjs/utils.js
CHANGED
|
@@ -10,8 +10,8 @@ const squareExp = 2, inSegmentRange = {
|
|
|
10
10
|
min: 0,
|
|
11
11
|
max: 1,
|
|
12
12
|
}, double = 2;
|
|
13
|
-
function drawPolygonMask(context, rawData, stroke) {
|
|
14
|
-
const color = (0, engine_1.rangeColorToRgb)(stroke.color);
|
|
13
|
+
function drawPolygonMask(engine, context, rawData, stroke) {
|
|
14
|
+
const color = (0, engine_1.rangeColorToRgb)(engine, stroke.color);
|
|
15
15
|
if (!color) {
|
|
16
16
|
return;
|
|
17
17
|
}
|
|
@@ -26,7 +26,7 @@ function drawPolygonMask(context, rawData, stroke) {
|
|
|
26
26
|
context.lineWidth = stroke.width;
|
|
27
27
|
context.stroke();
|
|
28
28
|
}
|
|
29
|
-
function drawPolygonMaskPath(context, path, stroke, position) {
|
|
29
|
+
function drawPolygonMaskPath(engine, context, path, stroke, position) {
|
|
30
30
|
const defaultTransform = {
|
|
31
31
|
a: 1,
|
|
32
32
|
b: 0,
|
|
@@ -34,7 +34,7 @@ function drawPolygonMaskPath(context, path, stroke, position) {
|
|
|
34
34
|
d: 1,
|
|
35
35
|
};
|
|
36
36
|
context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, position.x, position.y);
|
|
37
|
-
const color = (0, engine_1.rangeColorToRgb)(stroke.color);
|
|
37
|
+
const color = (0, engine_1.rangeColorToRgb)(engine, stroke.color);
|
|
38
38
|
if (!color) {
|
|
39
39
|
return;
|
|
40
40
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { deepExtend, isString, } from "@tsparticles/engine";
|
|
1
|
+
import { deepExtend, isNull, isString, } from "@tsparticles/engine";
|
|
2
2
|
import { PolygonMaskDraw } from "./PolygonMaskDraw.js";
|
|
3
3
|
import { PolygonMaskInline } from "./PolygonMaskInline.js";
|
|
4
4
|
import { PolygonMaskLocalSvg } from "./PolygonMaskLocalSvg.js";
|
|
5
5
|
import { PolygonMaskMove } from "./PolygonMaskMove.js";
|
|
6
6
|
import { PolygonMaskType } from "../../Enums/PolygonMaskType.js";
|
|
7
7
|
export class PolygonMask {
|
|
8
|
-
constructor() {
|
|
9
|
-
this.draw = new PolygonMaskDraw();
|
|
8
|
+
constructor(engine) {
|
|
9
|
+
this.draw = new PolygonMaskDraw(engine);
|
|
10
10
|
this.enable = false;
|
|
11
11
|
this.inline = new PolygonMaskInline();
|
|
12
12
|
this.move = new PolygonMaskMove();
|
|
@@ -14,7 +14,7 @@ export class PolygonMask {
|
|
|
14
14
|
this.type = PolygonMaskType.none;
|
|
15
15
|
}
|
|
16
16
|
load(data) {
|
|
17
|
-
if (
|
|
17
|
+
if (isNull(data)) {
|
|
18
18
|
return;
|
|
19
19
|
}
|
|
20
20
|
this.draw.load(data.draw);
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
import { isNull } from "@tsparticles/engine";
|
|
1
2
|
import { PolygonMaskDrawStroke } from "./PolygonMaskDrawStroke.js";
|
|
2
3
|
export class PolygonMaskDraw {
|
|
3
|
-
constructor() {
|
|
4
|
+
constructor(engine) {
|
|
4
5
|
this.enable = false;
|
|
5
|
-
this.stroke = new PolygonMaskDrawStroke();
|
|
6
|
+
this.stroke = new PolygonMaskDrawStroke(engine);
|
|
6
7
|
}
|
|
7
8
|
load(data) {
|
|
8
|
-
if (
|
|
9
|
+
if (isNull(data)) {
|
|
9
10
|
return;
|
|
10
11
|
}
|
|
11
12
|
if (data.enable !== undefined) {
|
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
import { OptionsColor, isString, stringToAlpha } from "@tsparticles/engine";
|
|
1
|
+
import { OptionsColor, isNull, isString, stringToAlpha, } from "@tsparticles/engine";
|
|
2
2
|
export class PolygonMaskDrawStroke {
|
|
3
|
-
constructor() {
|
|
3
|
+
constructor(engine) {
|
|
4
|
+
this._engine = engine;
|
|
4
5
|
this.color = new OptionsColor();
|
|
5
6
|
this.width = 0.5;
|
|
6
7
|
this.opacity = 1;
|
|
7
8
|
}
|
|
8
9
|
load(data) {
|
|
9
|
-
if (
|
|
10
|
+
if (isNull(data)) {
|
|
10
11
|
return;
|
|
11
12
|
}
|
|
12
13
|
this.color = OptionsColor.create(this.color, data.color);
|
|
13
14
|
if (isString(this.color.value)) {
|
|
14
|
-
this.opacity = stringToAlpha(this.color.value) ?? this.opacity;
|
|
15
|
+
this.opacity = stringToAlpha(this._engine, this.color.value) ?? this.opacity;
|
|
15
16
|
}
|
|
16
17
|
if (data.opacity !== undefined) {
|
|
17
18
|
this.opacity = data.opacity;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import { isNull } from "@tsparticles/engine";
|
|
1
2
|
import { PolygonMaskInlineArrangement, } from "../../Enums/PolygonMaskInlineArrangement.js";
|
|
2
3
|
export class PolygonMaskInline {
|
|
3
4
|
constructor() {
|
|
4
5
|
this.arrangement = PolygonMaskInlineArrangement.onePerPoint;
|
|
5
6
|
}
|
|
6
7
|
load(data) {
|
|
7
|
-
if (
|
|
8
|
+
if (isNull(data)) {
|
|
8
9
|
return;
|
|
9
10
|
}
|
|
10
11
|
if (data.arrangement !== undefined) {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { isNull, } from "@tsparticles/engine";
|
|
1
2
|
export class PolygonMaskLocalSvg {
|
|
2
3
|
constructor() {
|
|
3
4
|
this.path = [];
|
|
@@ -7,7 +8,7 @@ export class PolygonMaskLocalSvg {
|
|
|
7
8
|
};
|
|
8
9
|
}
|
|
9
10
|
load(data) {
|
|
10
|
-
if (
|
|
11
|
+
if (isNull(data)) {
|
|
11
12
|
return;
|
|
12
13
|
}
|
|
13
14
|
if (data.path !== undefined) {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { isNull } from "@tsparticles/engine";
|
|
1
2
|
import { PolygonMaskMoveType } from "../../Enums/PolygonMaskMoveType.js";
|
|
2
3
|
export class PolygonMaskMove {
|
|
3
4
|
constructor() {
|
|
@@ -5,7 +6,7 @@ export class PolygonMaskMove {
|
|
|
5
6
|
this.type = PolygonMaskMoveType.path;
|
|
6
7
|
}
|
|
7
8
|
load(data) {
|
|
8
|
-
if (
|
|
9
|
+
if (isNull(data)) {
|
|
9
10
|
return;
|
|
10
11
|
}
|
|
11
12
|
if (data.radius !== undefined) {
|
|
@@ -328,10 +328,10 @@ export class PolygonMaskInstance {
|
|
|
328
328
|
continue;
|
|
329
329
|
}
|
|
330
330
|
if (path2d && this.offset) {
|
|
331
|
-
drawPolygonMaskPath(context, path2d, polygonDraw.stroke, this.offset);
|
|
331
|
+
drawPolygonMaskPath(this._engine, context, path2d, polygonDraw.stroke, this.offset);
|
|
332
332
|
}
|
|
333
333
|
else if (rawData) {
|
|
334
|
-
drawPolygonMask(context, rawData, polygonDraw.stroke);
|
|
334
|
+
drawPolygonMask(this._engine, context, rawData, polygonDraw.stroke);
|
|
335
335
|
}
|
|
336
336
|
}
|
|
337
337
|
}
|
package/esm/PolygonMaskPlugin.js
CHANGED
|
@@ -15,7 +15,7 @@ export class PolygonMaskPlugin {
|
|
|
15
15
|
}
|
|
16
16
|
let polygonOptions = options.polygon;
|
|
17
17
|
if (polygonOptions?.load === undefined) {
|
|
18
|
-
options.polygon = polygonOptions = new PolygonMask();
|
|
18
|
+
options.polygon = polygonOptions = new PolygonMask(this._engine);
|
|
19
19
|
}
|
|
20
20
|
polygonOptions.load(source?.polygon);
|
|
21
21
|
}
|
package/esm/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import "./pathseg.js";
|
|
2
|
+
import { assertValidVersion } from "@tsparticles/engine";
|
|
2
3
|
import { PolygonMaskPlugin } from "./PolygonMaskPlugin.js";
|
|
3
4
|
export async function loadPolygonMaskPlugin(engine, refresh = true) {
|
|
5
|
+
assertValidVersion(engine, "3.7.0");
|
|
4
6
|
await engine.addPlugin(new PolygonMaskPlugin(engine), refresh);
|
|
5
7
|
}
|
|
6
8
|
export * from "./Enums/PolygonMaskInlineArrangement.js";
|
package/esm/utils.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Vector, getDistances, getStyleFromRgb, rangeColorToRgb } from "@tsparticles/engine";
|
|
1
|
+
import { Vector, getDistances, getStyleFromRgb, rangeColorToRgb, } from "@tsparticles/engine";
|
|
2
2
|
const squareExp = 2, inSegmentRange = {
|
|
3
3
|
min: 0,
|
|
4
4
|
max: 1,
|
|
5
5
|
}, double = 2;
|
|
6
|
-
export function drawPolygonMask(context, rawData, stroke) {
|
|
7
|
-
const color = rangeColorToRgb(stroke.color);
|
|
6
|
+
export function drawPolygonMask(engine, context, rawData, stroke) {
|
|
7
|
+
const color = rangeColorToRgb(engine, stroke.color);
|
|
8
8
|
if (!color) {
|
|
9
9
|
return;
|
|
10
10
|
}
|
|
@@ -19,7 +19,7 @@ export function drawPolygonMask(context, rawData, stroke) {
|
|
|
19
19
|
context.lineWidth = stroke.width;
|
|
20
20
|
context.stroke();
|
|
21
21
|
}
|
|
22
|
-
export function drawPolygonMaskPath(context, path, stroke, position) {
|
|
22
|
+
export function drawPolygonMaskPath(engine, context, path, stroke, position) {
|
|
23
23
|
const defaultTransform = {
|
|
24
24
|
a: 1,
|
|
25
25
|
b: 0,
|
|
@@ -27,7 +27,7 @@ export function drawPolygonMaskPath(context, path, stroke, position) {
|
|
|
27
27
|
d: 1,
|
|
28
28
|
};
|
|
29
29
|
context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, position.x, position.y);
|
|
30
|
-
const color = rangeColorToRgb(stroke.color);
|
|
30
|
+
const color = rangeColorToRgb(engine, stroke.color);
|
|
31
31
|
if (!color) {
|
|
32
32
|
return;
|
|
33
33
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/plugin-polygon-mask",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.7.0",
|
|
4
4
|
"description": "tsParticles polygon mask plugin",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"./package.json": "./package.json"
|
|
89
89
|
},
|
|
90
90
|
"dependencies": {
|
|
91
|
-
"@tsparticles/engine": "
|
|
91
|
+
"@tsparticles/engine": "3.7.0"
|
|
92
92
|
},
|
|
93
93
|
"publishConfig": {
|
|
94
94
|
"access": "public"
|
package/report.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8"/>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
6
|
-
<title>@tsparticles/plugin-polygon-mask [
|
|
6
|
+
<title>@tsparticles/plugin-polygon-mask [24 Nov 2024 at 19:24]</title>
|
|
7
7
|
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
|
|
8
8
|
|
|
9
9
|
<script>
|