@tsparticles/canvas-utils 4.0.0-beta.0 → 4.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/browser/Utils.js +9 -9
- package/cjs/Utils.js +9 -9
- package/esm/Utils.js +9 -9
- package/package.json +2 -2
- package/report.html +84 -29
- package/tsparticles.canvas.utils.js +2 -2
- package/tsparticles.canvas.utils.min.js +1 -1
- package/types/Utils.d.ts +3 -3
- package/umd/Utils.js +8 -8
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Demo / Generator : https://particles.js.org/
|
|
5
5
|
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
6
|
* How to use? : Check the GitHub README
|
|
7
|
-
* v4.0.0-beta.
|
|
7
|
+
* v4.0.0-beta.1
|
|
8
8
|
*/
|
|
9
9
|
/*
|
|
10
10
|
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
|
|
@@ -44,7 +44,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
|
|
|
44
44
|
\*******************************/
|
|
45
45
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
46
46
|
|
|
47
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ drawLine: () => (/* binding */ drawLine),\n/* harmony export */ getCanvasImageData: () => (/* binding */ getCanvasImageData),\n/* harmony export */ getImageData: () => (/* binding */ getImageData),\n/* harmony export */ getTextData: () => (/* binding */ getTextData),\n/* harmony export */ loadFont: () => (/* binding */ loadFont)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst defaultWidth = 0;\nfunction drawLine(context, begin, end) {\n context.beginPath();\n context.moveTo(begin.x, begin.y);\n context.lineTo(end.x, end.y);\n context.closePath();\n}\nfunction getCanvasImageData(ctx, size, offset, clear = true) {\n const imageData = ctx.getImageData(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y, size.width, size.height).data;\n if (clear) {\n ctx.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y, size.width, size.height);\n }\n const pixels = [];\n for(let i = 0; i < imageData.length; i += offset){\n const idx = i / offset, pos = {\n x: idx % size.width,\n y: Math.floor(idx / size.width)\n };\n pixels[pos.y] ??= [];\n const
|
|
47
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ drawLine: () => (/* binding */ drawLine),\n/* harmony export */ getCanvasImageData: () => (/* binding */ getCanvasImageData),\n/* harmony export */ getImageData: () => (/* binding */ getImageData),\n/* harmony export */ getTextData: () => (/* binding */ getTextData),\n/* harmony export */ loadFont: () => (/* binding */ loadFont)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst defaultWidth = 0, indexesOffset = {\n r: 0,\n g: 1,\n b: 2,\n a: 3\n}, alphaMax = 255, alphaFactor = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.identity / alphaMax;\nfunction drawLine(context, begin, end) {\n context.beginPath();\n context.moveTo(begin.x, begin.y);\n context.lineTo(end.x, end.y);\n context.closePath();\n}\nfunction getCanvasImageData(ctx, size, offset, clear = true) {\n const imageData = ctx.getImageData(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y, size.width, size.height).data;\n if (clear) {\n ctx.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y, size.width, size.height);\n }\n const pixels = [];\n for(let i = 0; i < imageData.length; i += offset){\n const idx = i / offset, pos = {\n x: idx % size.width,\n y: Math.floor(idx / size.width)\n };\n pixels[pos.y] ??= [];\n const row = pixels[pos.y];\n if (!row) {\n continue;\n }\n row[pos.x] = {\n r: imageData[i + indexesOffset.r] ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultRgbMin,\n g: imageData[i + indexesOffset.g] ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultRgbMin,\n b: imageData[i + indexesOffset.b] ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultRgbMin,\n a: (imageData[i + indexesOffset.a] ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultAlpha) * alphaFactor\n };\n }\n return {\n pixels,\n width: Math.min(...pixels.map((row)=>row.length)),\n height: pixels.length\n };\n}\nfunction getImageData(src, offset, canvasSettings) {\n const image = new Image();\n image.crossOrigin = \"Anonymous\";\n const p = new Promise((resolve, reject)=>{\n image.onerror = reject;\n image.onload = ()=>{\n const canvas = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"canvas\");\n canvas.width = image.width;\n canvas.height = image.height;\n const context = canvas.getContext(\"2d\", canvasSettings);\n if (!context) {\n reject(new Error(\"Could not get canvas context\"));\n return;\n }\n context.drawImage(image, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y, image.width, image.height, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y, canvas.width, canvas.height);\n resolve(getCanvasImageData(context, canvas, offset));\n };\n });\n image.src = src;\n return p;\n}\nfunction getTextData(textOptions, offset, fill, canvasSettings) {\n const canvas = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"canvas\"), context = canvas.getContext(\"2d\", canvasSettings), { font, text, lines: linesOptions, color } = textOptions;\n if (!text || !context) {\n return;\n }\n const lines = text.split(linesOptions.separator), fontSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNumber)(font.size) ? `${font.size.toString()}px` : font.size, linesData = [];\n let maxWidth = 0, totalHeight = 0;\n for (const line of lines){\n context.font = `${font.style || \"\"} ${font.variant || \"\"} ${font.weight || \"\"} ${fontSize} ${font.family}`;\n const measure = context.measureText(line), lineData = {\n measure,\n text: line,\n height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,\n width: measure.width\n };\n maxWidth = Math.max(maxWidth || defaultWidth, lineData.width);\n totalHeight += lineData.height + linesOptions.spacing;\n linesData.push(lineData);\n }\n canvas.width = maxWidth;\n canvas.height = totalHeight;\n let currentHeight = 0;\n for (const line of linesData){\n context.font = `${font.style || \"\"} ${font.variant || \"\"} ${font.weight || \"\"} ${fontSize} ${font.family}`;\n if (fill) {\n context.fillStyle = color;\n context.fillText(line.text, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, currentHeight + line.measure.actualBoundingBoxAscent);\n } else {\n context.strokeStyle = color;\n context.strokeText(line.text, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, currentHeight + line.measure.actualBoundingBoxAscent);\n }\n currentHeight += line.height + linesOptions.spacing;\n }\n return getCanvasImageData(context, canvas, offset);\n}\nasync function loadFont(font, weight) {\n try {\n await (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().fonts.load(`${weight ?? \"400\"} 36px '${font ?? \"Verdana\"}'`);\n } catch {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/canvas-utils/./dist/browser/Utils.js?\n}");
|
|
48
48
|
|
|
49
49
|
/***/ },
|
|
50
50
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var n in i)("object"==typeof exports?exports:t)[n]=i[n]}}(this,t=>(()=>{"use strict";var e={303(e){e.exports=t}},i={};function n(t){var o=i[t];if(void 0!==o)return o.exports;var r=i[t]={exports:{}};return e[t](r,r.exports,n),r.exports}n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};n.r(o),n.d(o,{drawLine:()=>
|
|
1
|
+
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var n in i)("object"==typeof exports?exports:t)[n]=i[n]}}(this,t=>(()=>{"use strict";var e={303(e){e.exports=t}},i={};function n(t){var o=i[t];if(void 0!==o)return o.exports;var r=i[t]={exports:{}};return e[t](r,r.exports,n),r.exports}n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};n.r(o),n.d(o,{drawLine:()=>l,getCanvasImageData:()=>g,getImageData:()=>s,getTextData:()=>h,loadFont:()=>c});var r=n(303);let a=r.identity/255;function l(t,e,i){t.beginPath(),t.moveTo(e.x,e.y),t.lineTo(i.x,i.y),t.closePath()}function g(t,e,i,n=!0){let o=t.getImageData(r.originPoint.x,r.originPoint.y,e.width,e.height).data;n&&t.clearRect(r.originPoint.x,r.originPoint.y,e.width,e.height);let l=[];for(let t=0;t<o.length;t+=i){let n=t/i,g={x:n%e.width,y:Math.floor(n/e.width)};l[g.y]??=[];let s=l[g.y];s&&(s[g.x]={r:o[t+0]??r.defaultRgbMin,g:o[t+1]??r.defaultRgbMin,b:o[t+2]??r.defaultRgbMin,a:(o[t+3]??r.defaultAlpha)*a})}return{pixels:l,width:Math.min(...l.map(t=>t.length)),height:l.length}}function s(t,e,i){let n=new Image;n.crossOrigin="Anonymous";let o=new Promise((t,o)=>{n.onerror=o,n.onload=()=>{let a=(0,r.safeDocument)().createElement("canvas");a.width=n.width,a.height=n.height;let l=a.getContext("2d",i);l?(l.drawImage(n,r.originPoint.x,r.originPoint.y,n.width,n.height,r.originPoint.x,r.originPoint.y,a.width,a.height),t(g(l,a,e))):o(Error("Could not get canvas context"))}});return n.src=t,o}function h(t,e,i,n){let o=(0,r.safeDocument)().createElement("canvas"),a=o.getContext("2d",n),{font:l,text:s,lines:h,color:c}=t;if(!s||!a)return;let u=s.split(h.separator),d=(0,r.isNumber)(l.size)?`${l.size.toString()}px`:l.size,f=[],x=0,p=0;for(let t of u){a.font=`${l.style||""} ${l.variant||""} ${l.weight||""} ${d} ${l.family}`;let e=a.measureText(t),i={measure:e,text:t,height:e.actualBoundingBoxAscent+e.actualBoundingBoxDescent,width:e.width};x=Math.max(x||0,i.width),p+=i.height+h.spacing,f.push(i)}o.width=x,o.height=p;let y=0;for(let t of f)a.font=`${l.style||""} ${l.variant||""} ${l.weight||""} ${d} ${l.family}`,i?(a.fillStyle=c,a.fillText(t.text,r.originPoint.x,y+t.measure.actualBoundingBoxAscent)):(a.strokeStyle=c,a.strokeText(t.text,r.originPoint.x,y+t.measure.actualBoundingBoxAscent)),y+=t.height+h.spacing;return g(a,o,e)}async function c(t,e){try{await (0,r.safeDocument)().fonts.load(`${e??"400"} 36px '${t??"Verdana"}'`)}catch{}}return o})());
|
package/types/Utils.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { type CanvasContextType, type ICoordinates, type IDimension } from "@tsparticles/engine";
|
|
1
2
|
import type { CanvasPixelData, ITextDataOptions } from "./types.js";
|
|
2
|
-
|
|
3
|
-
export declare function
|
|
4
|
-
export declare function getCanvasImageData(ctx: CanvasRenderingContext2D, size: IDimension, offset: number, clear?: boolean): CanvasPixelData;
|
|
3
|
+
export declare function drawLine(context: CanvasContextType, begin: ICoordinates, end: ICoordinates): void;
|
|
4
|
+
export declare function getCanvasImageData(ctx: CanvasContextType, size: IDimension, offset: number, clear?: boolean): CanvasPixelData;
|
|
5
5
|
export declare function getImageData(src: string, offset: number, canvasSettings?: CanvasRenderingContext2DSettings): Promise<CanvasPixelData>;
|
|
6
6
|
export declare function getTextData(textOptions: ITextDataOptions, offset: number, fill: boolean, canvasSettings?: CanvasRenderingContext2DSettings): CanvasPixelData | undefined;
|
|
7
7
|
export declare function loadFont(font?: string, weight?: string): Promise<void>;
|
package/umd/Utils.js
CHANGED
|
@@ -15,7 +15,12 @@
|
|
|
15
15
|
exports.getTextData = getTextData;
|
|
16
16
|
exports.loadFont = loadFont;
|
|
17
17
|
const engine_1 = require("@tsparticles/engine");
|
|
18
|
-
const defaultWidth = 0
|
|
18
|
+
const defaultWidth = 0, indexesOffset = {
|
|
19
|
+
r: 0,
|
|
20
|
+
g: 1,
|
|
21
|
+
b: 2,
|
|
22
|
+
a: 3,
|
|
23
|
+
}, alphaMax = 255, alphaFactor = engine_1.identity / alphaMax;
|
|
19
24
|
function drawLine(context, begin, end) {
|
|
20
25
|
context.beginPath();
|
|
21
26
|
context.moveTo(begin.x, begin.y);
|
|
@@ -34,12 +39,7 @@
|
|
|
34
39
|
y: Math.floor(idx / size.width),
|
|
35
40
|
};
|
|
36
41
|
pixels[pos.y] ??= [];
|
|
37
|
-
const
|
|
38
|
-
r: 0,
|
|
39
|
-
g: 1,
|
|
40
|
-
b: 2,
|
|
41
|
-
a: 3,
|
|
42
|
-
}, alphaFactor = 255, row = pixels[pos.y];
|
|
42
|
+
const row = pixels[pos.y];
|
|
43
43
|
if (!row) {
|
|
44
44
|
continue;
|
|
45
45
|
}
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
r: imageData[i + indexesOffset.r] ?? engine_1.defaultRgbMin,
|
|
48
48
|
g: imageData[i + indexesOffset.g] ?? engine_1.defaultRgbMin,
|
|
49
49
|
b: imageData[i + indexesOffset.b] ?? engine_1.defaultRgbMin,
|
|
50
|
-
a: (imageData[i + indexesOffset.a] ?? engine_1.defaultAlpha)
|
|
50
|
+
a: (imageData[i + indexesOffset.a] ?? engine_1.defaultAlpha) * alphaFactor,
|
|
51
51
|
};
|
|
52
52
|
}
|
|
53
53
|
return {
|