@tsparticles/plugin-polygon-mask 3.0.3 → 3.2.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/719.min.js +2 -0
- package/719.min.js.LICENSE.txt +1 -0
- package/787.min.js +2 -0
- package/787.min.js.LICENSE.txt +1 -0
- package/856.min.js +2 -0
- package/856.min.js.LICENSE.txt +1 -0
- package/browser/PolygonMaskInstance.js +60 -49
- package/browser/PolygonMaskPlugin.js +25 -0
- package/browser/index.js +1 -25
- package/browser/utils.js +22 -11
- package/cjs/PolygonMaskInstance.js +86 -52
- package/cjs/PolygonMaskPlugin.js +52 -0
- package/cjs/index.js +13 -25
- package/cjs/utils.js +24 -13
- package/dist_browser_PolygonMaskInstance_js.js +30 -0
- package/dist_browser_PolygonMaskPlugin_js.js +90 -0
- package/dist_browser_utils_js.js +30 -0
- package/esm/PolygonMaskInstance.js +60 -49
- package/esm/PolygonMaskPlugin.js +25 -0
- package/esm/index.js +1 -25
- package/esm/utils.js +22 -11
- package/package.json +2 -2
- package/report.html +3 -3
- package/tsparticles.plugin.polygon-mask.js +244 -2158
- package/tsparticles.plugin.polygon-mask.min.js +1 -1
- package/tsparticles.plugin.polygon-mask.min.js.LICENSE.txt +1 -1
- package/types/Options/Classes/PolygonMaskInline.d.ts +1 -2
- package/types/PolygonMaskInstance.d.ts +2 -2
- package/types/PolygonMaskPlugin.d.ts +11 -0
- package/types/utils.d.ts +1 -1
- package/umd/PolygonMaskInstance.js +88 -53
- package/umd/PolygonMaskPlugin.js +63 -0
- package/umd/index.js +15 -26
- package/umd/utils.js +24 -13
|
@@ -0,0 +1,90 @@
|
|
|
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
|
+
* v3.2.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_plugin_polygon_mask"] = this["webpackChunk_tsparticles_plugin_polygon_mask"] || []).push([["dist_browser_PolygonMaskPlugin_js"],{
|
|
19
|
+
|
|
20
|
+
/***/ "./dist/browser/Options/Classes/PolygonMask.js":
|
|
21
|
+
/*!*****************************************************!*\
|
|
22
|
+
!*** ./dist/browser/Options/Classes/PolygonMask.js ***!
|
|
23
|
+
\*****************************************************/
|
|
24
|
+
/***/ ((__unused_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 */ PolygonMask: () => (/* binding */ PolygonMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _PolygonMaskDraw_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PolygonMaskDraw.js */ \"./dist/browser/Options/Classes/PolygonMaskDraw.js\");\n/* harmony import */ var _PolygonMaskInline_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./PolygonMaskInline.js */ \"./dist/browser/Options/Classes/PolygonMaskInline.js\");\n/* harmony import */ var _PolygonMaskLocalSvg_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./PolygonMaskLocalSvg.js */ \"./dist/browser/Options/Classes/PolygonMaskLocalSvg.js\");\n/* harmony import */ var _PolygonMaskMove_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PolygonMaskMove.js */ \"./dist/browser/Options/Classes/PolygonMaskMove.js\");\n\n\n\n\n\nclass PolygonMask {\n constructor() {\n this.draw = new _PolygonMaskDraw_js__WEBPACK_IMPORTED_MODULE_1__.PolygonMaskDraw();\n this.enable = false;\n this.inline = new _PolygonMaskInline_js__WEBPACK_IMPORTED_MODULE_2__.PolygonMaskInline();\n this.move = new _PolygonMaskMove_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskMove();\n this.scale = 1;\n this.type = \"none\";\n }\n load(data) {\n if (!data) {\n return;\n }\n this.draw.load(data.draw);\n this.inline.load(data.inline);\n this.move.load(data.move);\n if (data.scale !== undefined) {\n this.scale = data.scale;\n }\n if (data.type !== undefined) {\n this.type = data.type;\n }\n if (data.enable !== undefined) {\n this.enable = data.enable;\n } else {\n this.enable = this.type !== \"none\";\n }\n if (data.url !== undefined) {\n this.url = data.url;\n }\n if (data.data !== undefined) {\n if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(data.data)) {\n this.data = data.data;\n } else {\n this.data = new _PolygonMaskLocalSvg_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskLocalSvg();\n this.data.load(data.data);\n }\n }\n if (data.position !== undefined) {\n this.position = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, data.position);\n }\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMask.js?");
|
|
27
|
+
|
|
28
|
+
/***/ }),
|
|
29
|
+
|
|
30
|
+
/***/ "./dist/browser/Options/Classes/PolygonMaskDraw.js":
|
|
31
|
+
/*!*********************************************************!*\
|
|
32
|
+
!*** ./dist/browser/Options/Classes/PolygonMaskDraw.js ***!
|
|
33
|
+
\*********************************************************/
|
|
34
|
+
/***/ ((__unused_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 */ PolygonMaskDraw: () => (/* binding */ PolygonMaskDraw)\n/* harmony export */ });\n/* harmony import */ var _PolygonMaskDrawStroke_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PolygonMaskDrawStroke.js */ \"./dist/browser/Options/Classes/PolygonMaskDrawStroke.js\");\n\nclass PolygonMaskDraw {\n constructor() {\n this.enable = false;\n this.stroke = new _PolygonMaskDrawStroke_js__WEBPACK_IMPORTED_MODULE_0__.PolygonMaskDrawStroke();\n }\n load(data) {\n if (!data) {\n return;\n }\n if (data.enable !== undefined) {\n this.enable = data.enable;\n }\n const stroke = data.stroke;\n this.stroke.load(stroke);\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskDraw.js?");
|
|
37
|
+
|
|
38
|
+
/***/ }),
|
|
39
|
+
|
|
40
|
+
/***/ "./dist/browser/Options/Classes/PolygonMaskDrawStroke.js":
|
|
41
|
+
/*!***************************************************************!*\
|
|
42
|
+
!*** ./dist/browser/Options/Classes/PolygonMaskDrawStroke.js ***!
|
|
43
|
+
\***************************************************************/
|
|
44
|
+
/***/ ((__unused_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 */ PolygonMaskDrawStroke: () => (/* binding */ PolygonMaskDrawStroke)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nclass PolygonMaskDrawStroke {\n constructor() {\n this.color = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor();\n this.width = 0.5;\n this.opacity = 1;\n }\n load(data) {\n if (!data) {\n return;\n }\n this.color = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor.create(this.color, data.color);\n if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(this.color.value)) {\n this.opacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.stringToAlpha)(this.color.value) ?? this.opacity;\n }\n if (data.opacity !== undefined) {\n this.opacity = data.opacity;\n }\n if (data.width !== undefined) {\n this.width = data.width;\n }\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskDrawStroke.js?");
|
|
47
|
+
|
|
48
|
+
/***/ }),
|
|
49
|
+
|
|
50
|
+
/***/ "./dist/browser/Options/Classes/PolygonMaskInline.js":
|
|
51
|
+
/*!***********************************************************!*\
|
|
52
|
+
!*** ./dist/browser/Options/Classes/PolygonMaskInline.js ***!
|
|
53
|
+
\***********************************************************/
|
|
54
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
55
|
+
|
|
56
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ PolygonMaskInline: () => (/* binding */ PolygonMaskInline)\n/* harmony export */ });\nclass PolygonMaskInline {\n constructor() {\n this.arrangement = \"one-per-point\";\n }\n load(data) {\n if (!data) {\n return;\n }\n if (data.arrangement !== undefined) {\n this.arrangement = data.arrangement;\n }\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskInline.js?");
|
|
57
|
+
|
|
58
|
+
/***/ }),
|
|
59
|
+
|
|
60
|
+
/***/ "./dist/browser/Options/Classes/PolygonMaskLocalSvg.js":
|
|
61
|
+
/*!*************************************************************!*\
|
|
62
|
+
!*** ./dist/browser/Options/Classes/PolygonMaskLocalSvg.js ***!
|
|
63
|
+
\*************************************************************/
|
|
64
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
65
|
+
|
|
66
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ PolygonMaskLocalSvg: () => (/* binding */ PolygonMaskLocalSvg)\n/* harmony export */ });\nclass PolygonMaskLocalSvg {\n constructor() {\n this.path = [];\n this.size = {\n height: 0,\n width: 0\n };\n }\n load(data) {\n if (!data) {\n return;\n }\n if (data.path !== undefined) {\n this.path = data.path;\n }\n if (data.size !== undefined) {\n if (data.size.width !== undefined) {\n this.size.width = data.size.width;\n }\n if (data.size.height !== undefined) {\n this.size.height = data.size.height;\n }\n }\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskLocalSvg.js?");
|
|
67
|
+
|
|
68
|
+
/***/ }),
|
|
69
|
+
|
|
70
|
+
/***/ "./dist/browser/Options/Classes/PolygonMaskMove.js":
|
|
71
|
+
/*!*********************************************************!*\
|
|
72
|
+
!*** ./dist/browser/Options/Classes/PolygonMaskMove.js ***!
|
|
73
|
+
\*********************************************************/
|
|
74
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
75
|
+
|
|
76
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ PolygonMaskMove: () => (/* binding */ PolygonMaskMove)\n/* harmony export */ });\nclass PolygonMaskMove {\n constructor() {\n this.radius = 10;\n this.type = \"path\";\n }\n load(data) {\n if (!data) {\n return;\n }\n if (data.radius !== undefined) {\n this.radius = data.radius;\n }\n if (data.type !== undefined) {\n this.type = data.type;\n }\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskMove.js?");
|
|
77
|
+
|
|
78
|
+
/***/ }),
|
|
79
|
+
|
|
80
|
+
/***/ "./dist/browser/PolygonMaskPlugin.js":
|
|
81
|
+
/*!*******************************************!*\
|
|
82
|
+
!*** ./dist/browser/PolygonMaskPlugin.js ***!
|
|
83
|
+
\*******************************************/
|
|
84
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
85
|
+
|
|
86
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ PolygonMaskPlugin: () => (/* binding */ PolygonMaskPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_PolygonMask_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/PolygonMask.js */ \"./dist/browser/Options/Classes/PolygonMask.js\");\n\nclass PolygonMaskPlugin {\n constructor(engine) {\n this.id = \"polygonMask\";\n this._engine = engine;\n }\n async getPlugin(container) {\n const {\n PolygonMaskInstance\n } = await __webpack_require__.e(/*! import() */ \"dist_browser_PolygonMaskInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./PolygonMaskInstance.js */ \"./dist/browser/PolygonMaskInstance.js\"));\n return new PolygonMaskInstance(container, this._engine);\n }\n loadOptions(options, source) {\n if (!this.needsPlugin(options) && !this.needsPlugin(source)) {\n return;\n }\n let polygonOptions = options.polygon;\n if (polygonOptions?.load === undefined) {\n options.polygon = polygonOptions = new _Options_Classes_PolygonMask_js__WEBPACK_IMPORTED_MODULE_0__.PolygonMask();\n }\n polygonOptions.load(source?.polygon);\n }\n needsPlugin(options) {\n return options?.polygon?.enable ?? (options?.polygon?.type !== undefined && options.polygon.type !== \"none\");\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/PolygonMaskPlugin.js?");
|
|
87
|
+
|
|
88
|
+
/***/ })
|
|
89
|
+
|
|
90
|
+
}]);
|
|
@@ -0,0 +1,30 @@
|
|
|
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
|
+
* v3.2.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_plugin_polygon_mask"] = this["webpackChunk_tsparticles_plugin_polygon_mask"] || []).push([["dist_browser_utils_js"],{
|
|
19
|
+
|
|
20
|
+
/***/ "./dist/browser/utils.js":
|
|
21
|
+
/*!*******************************!*\
|
|
22
|
+
!*** ./dist/browser/utils.js ***!
|
|
23
|
+
\*******************************/
|
|
24
|
+
/***/ ((__unused_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 */ calcClosestPointOnSegment: () => (/* binding */ calcClosestPointOnSegment),\n/* harmony export */ drawPolygonMask: () => (/* binding */ drawPolygonMask),\n/* harmony export */ drawPolygonMaskPath: () => (/* binding */ drawPolygonMaskPath),\n/* harmony export */ parsePaths: () => (/* binding */ parsePaths),\n/* harmony export */ segmentBounce: () => (/* binding */ segmentBounce)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nconst squareExp = 2,\n inSegmentRange = {\n min: 0,\n max: 1\n },\n double = 2;\nfunction drawPolygonMask(context, rawData, stroke) {\n const color = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(stroke.color);\n if (!color) {\n return;\n }\n const firstIndex = 0,\n firstItem = rawData[firstIndex];\n context.beginPath();\n context.moveTo(firstItem.x, firstItem.y);\n for (const item of rawData) {\n context.lineTo(item.x, item.y);\n }\n context.closePath();\n context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(color);\n context.lineWidth = stroke.width;\n context.stroke();\n}\nfunction drawPolygonMaskPath(context, path, stroke, position) {\n const defaultTransform = {\n a: 1,\n b: 0,\n c: 0,\n d: 1\n };\n context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, position.x, position.y);\n const color = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(stroke.color);\n if (!color) {\n return;\n }\n context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(color, stroke.opacity);\n context.lineWidth = stroke.width;\n context.stroke(path);\n context.resetTransform();\n}\nfunction parsePaths(paths, scale, offset) {\n const res = [],\n defaultCount = 0;\n for (const path of paths) {\n const segments = path.element.pathSegList,\n len = segments?.numberOfItems ?? defaultCount,\n p = {\n x: 0,\n y: 0\n };\n for (let i = 0; i < len; i++) {\n const segment = segments?.getItem(i),\n svgPathSeg = window.SVGPathSeg;\n switch (segment?.pathSegType) {\n case svgPathSeg.PATHSEG_MOVETO_ABS:\n case svgPathSeg.PATHSEG_LINETO_ABS:\n case svgPathSeg.PATHSEG_CURVETO_CUBIC_ABS:\n case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:\n case svgPathSeg.PATHSEG_ARC_ABS:\n case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:\n case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:\n {\n const absSeg = segment;\n p.x = absSeg.x;\n p.y = absSeg.y;\n break;\n }\n case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:\n p.x = segment.x;\n break;\n case svgPathSeg.PATHSEG_LINETO_VERTICAL_ABS:\n p.y = segment.y;\n break;\n case svgPathSeg.PATHSEG_LINETO_REL:\n case svgPathSeg.PATHSEG_MOVETO_REL:\n case svgPathSeg.PATHSEG_CURVETO_CUBIC_REL:\n case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:\n case svgPathSeg.PATHSEG_ARC_REL:\n case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:\n case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:\n {\n const relSeg = segment;\n p.x += relSeg.x;\n p.y += relSeg.y;\n break;\n }\n case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:\n p.x += segment.x;\n break;\n case svgPathSeg.PATHSEG_LINETO_VERTICAL_REL:\n p.y += segment.y;\n break;\n case svgPathSeg.PATHSEG_UNKNOWN:\n case svgPathSeg.PATHSEG_CLOSEPATH:\n continue;\n }\n res.push({\n x: p.x * scale + offset.x,\n y: p.y * scale + offset.y\n });\n }\n }\n return res;\n}\nfunction calcClosestPointOnSegment(s1, s2, pos) {\n const {\n dx: dx1,\n dy: dy1\n } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos, s1),\n {\n dx: dx2,\n dy: dy2\n } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(s2, s1),\n t = (dx1 * dx2 + dy1 * dy2) / (dx2 ** squareExp + dy2 ** squareExp),\n res = {\n x: s1.x + dx2 * t,\n y: s1.y + dy2 * t,\n isOnSegment: t >= inSegmentRange.min && t <= inSegmentRange.max\n };\n if (t < inSegmentRange.min) {\n res.x = s1.x;\n res.y = s1.y;\n } else if (t > inSegmentRange.max) {\n res.x = s2.x;\n res.y = s2.y;\n }\n return res;\n}\nfunction segmentBounce(start, stop, velocity) {\n const {\n dx,\n dy\n } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(start, stop),\n wallAngle = Math.atan2(dy, dx),\n wallNormal = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)),\n d = double * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);\n wallNormal.multTo(d);\n velocity.subFrom(wallNormal);\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/utils.js?");
|
|
27
|
+
|
|
28
|
+
/***/ })
|
|
29
|
+
|
|
30
|
+
}]);
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { deepExtend, errorPrefix, getDistance, getDistances, getRandom, isArray, isString, itemFromArray, } from "@tsparticles/engine";
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { deepExtend, errorPrefix, getDistance, getDistances, getRandom, isArray, isString, itemFromArray, percentDenominator, } from "@tsparticles/engine";
|
|
2
|
+
const noPolygonDataLoaded = `${errorPrefix} No polygon data loaded.`, noPolygonFound = `${errorPrefix} No polygon found, you need to specify SVG url in config.`, origin = {
|
|
3
|
+
x: 0,
|
|
4
|
+
y: 0,
|
|
5
|
+
}, half = 0.5, double = 2;
|
|
4
6
|
export class PolygonMaskInstance {
|
|
5
7
|
constructor(container, engine) {
|
|
6
8
|
this._checkInsidePolygon = (position) => {
|
|
@@ -11,19 +13,20 @@ export class PolygonMaskInstance {
|
|
|
11
13
|
if (!this.raw) {
|
|
12
14
|
throw new Error(noPolygonFound);
|
|
13
15
|
}
|
|
14
|
-
const canvasSize = container.canvas.size, x = position?.x ?? getRandom() * canvasSize.width, y = position?.y ?? getRandom() * canvasSize.height;
|
|
16
|
+
const canvasSize = container.canvas.size, x = position?.x ?? getRandom() * canvasSize.width, y = position?.y ?? getRandom() * canvasSize.height, indexOffset = 1;
|
|
15
17
|
let inside = false;
|
|
16
|
-
for (let i = 0, j = this.raw.length -
|
|
18
|
+
for (let i = 0, j = this.raw.length - indexOffset; i < this.raw.length; j = i++) {
|
|
17
19
|
const pi = this.raw[i], pj = this.raw[j], intersect = pi.y > y !== pj.y > y && x < ((pj.x - pi.x) * (y - pi.y)) / (pj.y - pi.y) + pi.x;
|
|
18
20
|
if (intersect) {
|
|
19
21
|
inside = !inside;
|
|
20
22
|
}
|
|
21
23
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
if (options.type === "inside") {
|
|
25
|
+
return inside;
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
return options.type === "outside" ? !inside : false;
|
|
29
|
+
}
|
|
27
30
|
};
|
|
28
31
|
this._createPath2D = () => {
|
|
29
32
|
const container = this._container, options = container.actualOptions.polygon;
|
|
@@ -45,13 +48,14 @@ export class PolygonMaskInstance {
|
|
|
45
48
|
else {
|
|
46
49
|
delete path.path2d;
|
|
47
50
|
}
|
|
48
|
-
if (path.path2d
|
|
51
|
+
if (path.path2d ?? !this.raw) {
|
|
49
52
|
continue;
|
|
50
53
|
}
|
|
51
54
|
path.path2d = new Path2D();
|
|
52
|
-
|
|
55
|
+
const firstIndex = 0, firstPoint = this.raw[firstIndex];
|
|
56
|
+
path.path2d.moveTo(firstPoint.x, firstPoint.y);
|
|
53
57
|
this.raw.forEach((pos, i) => {
|
|
54
|
-
if (i >
|
|
58
|
+
if (i > firstIndex) {
|
|
55
59
|
path.path2d?.lineTo(pos.x, pos.y);
|
|
56
60
|
}
|
|
57
61
|
});
|
|
@@ -63,7 +67,7 @@ export class PolygonMaskInstance {
|
|
|
63
67
|
if (!options) {
|
|
64
68
|
return;
|
|
65
69
|
}
|
|
66
|
-
const url = svgUrl
|
|
70
|
+
const url = svgUrl ?? options.url, forceDownload = force ?? false;
|
|
67
71
|
if (!url || (this.paths !== undefined && !forceDownload)) {
|
|
68
72
|
return this.raw;
|
|
69
73
|
}
|
|
@@ -71,14 +75,14 @@ export class PolygonMaskInstance {
|
|
|
71
75
|
if (!req.ok) {
|
|
72
76
|
throw new Error(`${errorPrefix} occurred during polygon mask download`);
|
|
73
77
|
}
|
|
74
|
-
return this._parseSvgPath(await req.text(), force);
|
|
78
|
+
return await this._parseSvgPath(await req.text(), force);
|
|
75
79
|
};
|
|
76
80
|
this._drawPoints = () => {
|
|
77
81
|
if (!this.raw) {
|
|
78
82
|
return;
|
|
79
83
|
}
|
|
80
84
|
for (const item of this.raw) {
|
|
81
|
-
this._container.particles.addParticle({
|
|
85
|
+
void this._container.particles.addParticle({
|
|
82
86
|
x: item.x,
|
|
83
87
|
y: item.y,
|
|
84
88
|
});
|
|
@@ -89,11 +93,11 @@ export class PolygonMaskInstance {
|
|
|
89
93
|
if (!polygonMaskOptions) {
|
|
90
94
|
return;
|
|
91
95
|
}
|
|
92
|
-
if (!this.raw
|
|
96
|
+
if (!this.raw?.length || !this.paths?.length) {
|
|
93
97
|
throw new Error(noPolygonDataLoaded);
|
|
94
98
|
}
|
|
95
99
|
let offset = 0, point;
|
|
96
|
-
const totalLength = this.paths.reduce((tot, path) => tot + path.length,
|
|
100
|
+
const baseAccumulator = 0, totalLength = this.paths.reduce((tot, path) => tot + path.length, baseAccumulator), distance = totalLength / options.particles.number.value;
|
|
97
101
|
for (const path of this.paths) {
|
|
98
102
|
const pathDistance = distance * index - offset;
|
|
99
103
|
if (pathDistance <= path.length) {
|
|
@@ -106,12 +110,12 @@ export class PolygonMaskInstance {
|
|
|
106
110
|
}
|
|
107
111
|
const scale = this._scale;
|
|
108
112
|
return {
|
|
109
|
-
x: (point?.x ??
|
|
110
|
-
y: (point?.y ??
|
|
113
|
+
x: (point?.x ?? origin.x) * scale + (this.offset?.x ?? origin.x),
|
|
114
|
+
y: (point?.y ?? origin.y) * scale + (this.offset?.y ?? origin.y),
|
|
111
115
|
};
|
|
112
116
|
};
|
|
113
117
|
this._getPointByIndex = (index) => {
|
|
114
|
-
if (!this.raw
|
|
118
|
+
if (!this.raw?.length) {
|
|
115
119
|
throw new Error(noPolygonDataLoaded);
|
|
116
120
|
}
|
|
117
121
|
const coords = this.raw[index % this.raw.length];
|
|
@@ -121,7 +125,7 @@ export class PolygonMaskInstance {
|
|
|
121
125
|
};
|
|
122
126
|
};
|
|
123
127
|
this._getRandomPoint = () => {
|
|
124
|
-
if (!this.raw
|
|
128
|
+
if (!this.raw?.length) {
|
|
125
129
|
throw new Error(noPolygonDataLoaded);
|
|
126
130
|
}
|
|
127
131
|
const coords = itemFromArray(this.raw);
|
|
@@ -135,13 +139,13 @@ export class PolygonMaskInstance {
|
|
|
135
139
|
if (!options) {
|
|
136
140
|
return;
|
|
137
141
|
}
|
|
138
|
-
if (!this.raw
|
|
142
|
+
if (!this.raw?.length || !this.paths?.length) {
|
|
139
143
|
throw new Error(noPolygonDataLoaded);
|
|
140
144
|
}
|
|
141
|
-
const path = itemFromArray(this.paths), distance = Math.floor(getRandom() * path.length) +
|
|
145
|
+
const path = itemFromArray(this.paths), offset = 1, distance = Math.floor(getRandom() * path.length) + offset, point = path.element.getPointAtLength(distance), scale = this._scale;
|
|
142
146
|
return {
|
|
143
|
-
x: point.x * scale + (this.offset?.x
|
|
144
|
-
y: point.y * scale + (this.offset?.y
|
|
147
|
+
x: point.x * scale + (this.offset?.x ?? origin.x),
|
|
148
|
+
y: point.y * scale + (this.offset?.y ?? origin.y),
|
|
145
149
|
};
|
|
146
150
|
};
|
|
147
151
|
this._initRawData = async (force) => {
|
|
@@ -163,14 +167,14 @@ export class PolygonMaskInstance {
|
|
|
163
167
|
const namespaces = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
|
|
164
168
|
svg = `<svg ${namespaces} width="${data.size.width}" height="${data.size.height}">${path}</svg>`;
|
|
165
169
|
}
|
|
166
|
-
this.raw = this._parseSvgPath(svg, force);
|
|
170
|
+
this.raw = await this._parseSvgPath(svg, force);
|
|
167
171
|
}
|
|
168
172
|
this._createPath2D();
|
|
169
173
|
this._engine.dispatchEvent("polygonMaskLoaded", {
|
|
170
174
|
container: this._container,
|
|
171
175
|
});
|
|
172
176
|
};
|
|
173
|
-
this._parseSvgPath = (xml, force) => {
|
|
177
|
+
this._parseSvgPath = async (xml, force) => {
|
|
174
178
|
const forceDownload = force ?? false;
|
|
175
179
|
if (this.paths !== undefined && !forceDownload) {
|
|
176
180
|
return this.raw;
|
|
@@ -179,7 +183,7 @@ export class PolygonMaskInstance {
|
|
|
179
183
|
if (!options) {
|
|
180
184
|
return;
|
|
181
185
|
}
|
|
182
|
-
const parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), svg = doc.getElementsByTagName("svg")[
|
|
186
|
+
const parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
|
|
183
187
|
let svgPaths = svg.getElementsByTagName("path");
|
|
184
188
|
if (!svgPaths.length) {
|
|
185
189
|
svgPaths = doc.getElementsByTagName("path");
|
|
@@ -202,31 +206,33 @@ export class PolygonMaskInstance {
|
|
|
202
206
|
y: 50,
|
|
203
207
|
}, canvasSize = container.canvas.size;
|
|
204
208
|
this.offset = {
|
|
205
|
-
x: (canvasSize.width * position.x) /
|
|
206
|
-
y: (canvasSize.height * position.y) /
|
|
209
|
+
x: (canvasSize.width * position.x) / percentDenominator - this.dimension.width * half,
|
|
210
|
+
y: (canvasSize.height * position.y) / percentDenominator - this.dimension.height * half,
|
|
207
211
|
};
|
|
212
|
+
const { parsePaths } = await import("./utils.js");
|
|
208
213
|
return parsePaths(this.paths, scale, this.offset);
|
|
209
214
|
};
|
|
210
|
-
this._polygonBounce = (particle,
|
|
215
|
+
this._polygonBounce = async (particle, delta, direction) => {
|
|
211
216
|
const options = this._container.actualOptions.polygon;
|
|
212
217
|
if (!this.raw || !options?.enable || direction !== "top") {
|
|
213
218
|
return false;
|
|
214
219
|
}
|
|
215
220
|
if (options.type === "inside" || options.type === "outside") {
|
|
216
221
|
let closest, dx, dy;
|
|
217
|
-
const pos = particle.getPosition(), radius = particle.getRadius();
|
|
218
|
-
for (let i = 0, j = this.raw.length -
|
|
219
|
-
const pi = this.raw[i], pj = this.raw[j];
|
|
220
|
-
closest =
|
|
222
|
+
const pos = particle.getPosition(), radius = particle.getRadius(), offset = 1;
|
|
223
|
+
for (let i = 0, j = this.raw.length - offset; i < this.raw.length; j = i++) {
|
|
224
|
+
const pi = this.raw[i], pj = this.raw[j], { calcClosestPointOnSegment } = await import("./utils.js");
|
|
225
|
+
closest = calcClosestPointOnSegment(pi, pj, pos);
|
|
221
226
|
const dist = getDistances(pos, closest);
|
|
222
227
|
[dx, dy] = [dist.dx, dist.dy];
|
|
223
228
|
if (dist.distance < radius) {
|
|
229
|
+
const { segmentBounce } = await import("./utils.js");
|
|
224
230
|
segmentBounce(pi, pj, particle.velocity);
|
|
225
231
|
return true;
|
|
226
232
|
}
|
|
227
233
|
}
|
|
228
234
|
if (closest && dx !== undefined && dy !== undefined && !this._checkInsidePolygon(pos)) {
|
|
229
|
-
const factor = { x: 1, y: 1 }, diameter = radius *
|
|
235
|
+
const factor = { x: 1, y: 1 }, diameter = radius * double, inverse = -1;
|
|
230
236
|
if (pos.x >= closest.x) {
|
|
231
237
|
factor.x = -1;
|
|
232
238
|
}
|
|
@@ -235,15 +241,15 @@ export class PolygonMaskInstance {
|
|
|
235
241
|
}
|
|
236
242
|
particle.position.x = closest.x + diameter * factor.x;
|
|
237
243
|
particle.position.y = closest.y + diameter * factor.y;
|
|
238
|
-
particle.velocity.mult(
|
|
244
|
+
particle.velocity.mult(inverse);
|
|
239
245
|
return true;
|
|
240
246
|
}
|
|
241
247
|
}
|
|
242
248
|
else if (options.type === "inline" && particle.initialPosition) {
|
|
243
249
|
const dist = getDistance(particle.initialPosition, particle.getPosition()), { velocity } = particle;
|
|
244
250
|
if (dist > this._moveRadius) {
|
|
245
|
-
velocity.x = velocity.y
|
|
246
|
-
velocity.y = velocity.x
|
|
251
|
+
velocity.x = velocity.y * half - velocity.x;
|
|
252
|
+
velocity.y = velocity.x * half - velocity.y;
|
|
247
253
|
return true;
|
|
248
254
|
}
|
|
249
255
|
}
|
|
@@ -302,7 +308,7 @@ export class PolygonMaskInstance {
|
|
|
302
308
|
options.type !== "inline" &&
|
|
303
309
|
this._checkInsidePolygon(position));
|
|
304
310
|
}
|
|
305
|
-
draw(context) {
|
|
311
|
+
async draw(context) {
|
|
306
312
|
if (!this.paths?.length) {
|
|
307
313
|
return;
|
|
308
314
|
}
|
|
@@ -321,9 +327,11 @@ export class PolygonMaskInstance {
|
|
|
321
327
|
continue;
|
|
322
328
|
}
|
|
323
329
|
if (path2d && this.offset) {
|
|
330
|
+
const { drawPolygonMaskPath } = await import("./utils.js");
|
|
324
331
|
drawPolygonMaskPath(context, path2d, polygonDraw.stroke, this.offset);
|
|
325
332
|
}
|
|
326
333
|
else if (rawData) {
|
|
334
|
+
const { drawPolygonMask } = await import("./utils.js");
|
|
327
335
|
drawPolygonMask(context, rawData, polygonDraw.stroke);
|
|
328
336
|
}
|
|
329
337
|
}
|
|
@@ -339,12 +347,12 @@ export class PolygonMaskInstance {
|
|
|
339
347
|
await this._initRawData();
|
|
340
348
|
}
|
|
341
349
|
}
|
|
342
|
-
particleBounce(particle, delta, direction) {
|
|
343
|
-
return this._polygonBounce(particle, delta, direction);
|
|
350
|
+
async particleBounce(particle, delta, direction) {
|
|
351
|
+
return await this._polygonBounce(particle, delta, direction);
|
|
344
352
|
}
|
|
345
353
|
particlePosition(position) {
|
|
346
|
-
const options = this._container.actualOptions.polygon;
|
|
347
|
-
if (!(options?.enable && (this.raw?.length ??
|
|
354
|
+
const options = this._container.actualOptions.polygon, defaultLength = 0;
|
|
355
|
+
if (!(options?.enable && (this.raw?.length ?? defaultLength) > defaultLength)) {
|
|
348
356
|
return;
|
|
349
357
|
}
|
|
350
358
|
return deepExtend({}, position ? position : this._randomPoint());
|
|
@@ -368,10 +376,13 @@ export class PolygonMaskInstance {
|
|
|
368
376
|
if (this.redrawTimeout) {
|
|
369
377
|
clearTimeout(this.redrawTimeout);
|
|
370
378
|
}
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
379
|
+
const timeout = 250;
|
|
380
|
+
this.redrawTimeout = window.setTimeout(() => {
|
|
381
|
+
void (async () => {
|
|
382
|
+
await this._initRawData(true);
|
|
383
|
+
await container.particles.redraw();
|
|
384
|
+
})();
|
|
385
|
+
}, timeout);
|
|
375
386
|
}
|
|
376
387
|
stop() {
|
|
377
388
|
delete this.raw;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { PolygonMask } from "./Options/Classes/PolygonMask.js";
|
|
2
|
+
export class PolygonMaskPlugin {
|
|
3
|
+
constructor(engine) {
|
|
4
|
+
this.id = "polygonMask";
|
|
5
|
+
this._engine = engine;
|
|
6
|
+
}
|
|
7
|
+
async getPlugin(container) {
|
|
8
|
+
const { PolygonMaskInstance } = await import("./PolygonMaskInstance.js");
|
|
9
|
+
return new PolygonMaskInstance(container, this._engine);
|
|
10
|
+
}
|
|
11
|
+
loadOptions(options, source) {
|
|
12
|
+
if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
let polygonOptions = options.polygon;
|
|
16
|
+
if (polygonOptions?.load === undefined) {
|
|
17
|
+
options.polygon = polygonOptions = new PolygonMask();
|
|
18
|
+
}
|
|
19
|
+
polygonOptions.load(source?.polygon);
|
|
20
|
+
}
|
|
21
|
+
needsPlugin(options) {
|
|
22
|
+
return (options?.polygon?.enable ??
|
|
23
|
+
(options?.polygon?.type !== undefined && options.polygon.type !== "none"));
|
|
24
|
+
}
|
|
25
|
+
}
|
package/esm/index.js
CHANGED
|
@@ -1,30 +1,6 @@
|
|
|
1
1
|
import "./pathseg.js";
|
|
2
|
-
import { PolygonMask } from "./Options/Classes/PolygonMask.js";
|
|
3
|
-
import { PolygonMaskInstance } from "./PolygonMaskInstance.js";
|
|
4
|
-
class PolygonMaskPlugin {
|
|
5
|
-
constructor(engine) {
|
|
6
|
-
this.id = "polygonMask";
|
|
7
|
-
this._engine = engine;
|
|
8
|
-
}
|
|
9
|
-
getPlugin(container) {
|
|
10
|
-
return new PolygonMaskInstance(container, this._engine);
|
|
11
|
-
}
|
|
12
|
-
loadOptions(options, source) {
|
|
13
|
-
if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
|
|
14
|
-
return;
|
|
15
|
-
}
|
|
16
|
-
let polygonOptions = options.polygon;
|
|
17
|
-
if (polygonOptions?.load === undefined) {
|
|
18
|
-
options.polygon = polygonOptions = new PolygonMask();
|
|
19
|
-
}
|
|
20
|
-
polygonOptions.load(source?.polygon);
|
|
21
|
-
}
|
|
22
|
-
needsPlugin(options) {
|
|
23
|
-
return (options?.polygon?.enable ??
|
|
24
|
-
(options?.polygon?.type !== undefined && options.polygon.type !== "none"));
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
2
|
export async function loadPolygonMaskPlugin(engine, refresh = true) {
|
|
3
|
+
const { PolygonMaskPlugin } = await import("./PolygonMaskPlugin.js");
|
|
28
4
|
await engine.addPlugin(new PolygonMaskPlugin(engine), refresh);
|
|
29
5
|
}
|
|
30
6
|
export * from "./Enums/PolygonMaskInlineArrangement.js";
|
package/esm/utils.js
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import { Vector, getDistances, getStyleFromRgb, rangeColorToRgb } from "@tsparticles/engine";
|
|
2
|
+
const squareExp = 2, inSegmentRange = {
|
|
3
|
+
min: 0,
|
|
4
|
+
max: 1,
|
|
5
|
+
}, double = 2;
|
|
2
6
|
export function drawPolygonMask(context, rawData, stroke) {
|
|
3
7
|
const color = rangeColorToRgb(stroke.color);
|
|
4
8
|
if (!color) {
|
|
5
9
|
return;
|
|
6
10
|
}
|
|
11
|
+
const firstIndex = 0, firstItem = rawData[firstIndex];
|
|
7
12
|
context.beginPath();
|
|
8
|
-
context.moveTo(
|
|
13
|
+
context.moveTo(firstItem.x, firstItem.y);
|
|
9
14
|
for (const item of rawData) {
|
|
10
15
|
context.lineTo(item.x, item.y);
|
|
11
16
|
}
|
|
@@ -15,7 +20,13 @@ export function drawPolygonMask(context, rawData, stroke) {
|
|
|
15
20
|
context.stroke();
|
|
16
21
|
}
|
|
17
22
|
export function drawPolygonMaskPath(context, path, stroke, position) {
|
|
18
|
-
|
|
23
|
+
const defaultTransform = {
|
|
24
|
+
a: 1,
|
|
25
|
+
b: 0,
|
|
26
|
+
c: 0,
|
|
27
|
+
d: 1,
|
|
28
|
+
};
|
|
29
|
+
context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, position.x, position.y);
|
|
19
30
|
const color = rangeColorToRgb(stroke.color);
|
|
20
31
|
if (!color) {
|
|
21
32
|
return;
|
|
@@ -23,12 +34,12 @@ export function drawPolygonMaskPath(context, path, stroke, position) {
|
|
|
23
34
|
context.strokeStyle = getStyleFromRgb(color, stroke.opacity);
|
|
24
35
|
context.lineWidth = stroke.width;
|
|
25
36
|
context.stroke(path);
|
|
26
|
-
context.
|
|
37
|
+
context.resetTransform();
|
|
27
38
|
}
|
|
28
39
|
export function parsePaths(paths, scale, offset) {
|
|
29
|
-
const res = [];
|
|
40
|
+
const res = [], defaultCount = 0;
|
|
30
41
|
for (const path of paths) {
|
|
31
|
-
const segments = path.element.pathSegList, len = segments?.numberOfItems ??
|
|
42
|
+
const segments = path.element.pathSegList, len = segments?.numberOfItems ?? defaultCount, p = {
|
|
32
43
|
x: 0,
|
|
33
44
|
y: 0,
|
|
34
45
|
};
|
|
@@ -83,24 +94,24 @@ export function parsePaths(paths, scale, offset) {
|
|
|
83
94
|
}
|
|
84
95
|
return res;
|
|
85
96
|
}
|
|
86
|
-
export function
|
|
87
|
-
const { dx: dx1, dy: dy1 } = getDistances(pos, s1), { dx: dx2, dy: dy2 } = getDistances(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (dx2 **
|
|
97
|
+
export function calcClosestPointOnSegment(s1, s2, pos) {
|
|
98
|
+
const { dx: dx1, dy: dy1 } = getDistances(pos, s1), { dx: dx2, dy: dy2 } = getDistances(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (dx2 ** squareExp + dy2 ** squareExp), res = {
|
|
88
99
|
x: s1.x + dx2 * t,
|
|
89
100
|
y: s1.y + dy2 * t,
|
|
90
|
-
isOnSegment: t >=
|
|
101
|
+
isOnSegment: t >= inSegmentRange.min && t <= inSegmentRange.max,
|
|
91
102
|
};
|
|
92
|
-
if (t <
|
|
103
|
+
if (t < inSegmentRange.min) {
|
|
93
104
|
res.x = s1.x;
|
|
94
105
|
res.y = s1.y;
|
|
95
106
|
}
|
|
96
|
-
else if (t >
|
|
107
|
+
else if (t > inSegmentRange.max) {
|
|
97
108
|
res.x = s2.x;
|
|
98
109
|
res.y = s2.y;
|
|
99
110
|
}
|
|
100
111
|
return res;
|
|
101
112
|
}
|
|
102
113
|
export function segmentBounce(start, stop, velocity) {
|
|
103
|
-
const { dx, dy } = getDistances(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d =
|
|
114
|
+
const { dx, dy } = getDistances(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d = double * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
|
|
104
115
|
wallNormal.multTo(d);
|
|
105
116
|
velocity.subFrom(wallNormal);
|
|
106
117
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/plugin-polygon-mask",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.2.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": "^3.0
|
|
91
|
+
"@tsparticles/engine": "^3.2.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 [31 Jan 2024 at 02:08]</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>
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
<body>
|
|
32
32
|
<div id="app"></div>
|
|
33
33
|
<script>
|
|
34
|
-
window.chartData = [
|
|
35
|
-
window.entrypoints = ["tsparticles.plugin.polygon-mask
|
|
34
|
+
window.chartData = [];
|
|
35
|
+
window.entrypoints = ["tsparticles.plugin.polygon-mask.min"];
|
|
36
36
|
window.defaultSizes = "parsed";
|
|
37
37
|
</script>
|
|
38
38
|
</body>
|